- KaNi
- 常連さん
- 会議室デビュー日: 2003/06/04
- 投稿数: 36
- お住まい・勤務地: 埼玉県
|
投稿日時: 2003-11-10 15:38
こんにちは。
HTMLの話なので、どこの会議室にも当てはまらないのですが、対応されたことのある方がいらっしゃるのではないかと思いここに書き込ませて頂きました。
表題の通り、TABLEタグを使って表を作るときに、EXCELの「ウィンドウ枠の固定」のようにヘッダ(一番上の行)だけ固定してデータのみスクロールするということをやりたいのですが、やり方が浮かばず、途方に暮れております。
<THEAD><TFOOT><TBODY>を使えば(ブラウザが対応すれば)可能な様ですが現行のブラウザではダメなようで・・・。
フレームを切ってヘッダとデータで分けたり、レイヤーを使ってヘッダをフロートさせることも試したのですが、挿入するデータの幅がまちまちなのでヘッダの列区切り位置とデータの列区切り位置がずれてしまいます。
ちなみに、対応するブラウザはIE5以降、NN6以降を考えています。
このような状況に遭遇した場合に、みなさんどうなされた(れる)でしょうか。
ご意見をお聞かせ下さい。よろしくお願いいたします。
|
|---|
- ＮＹＲＬ
- ベテラン
- 会議室デビュー日: 2003/07/14
- 投稿数: 90
|
投稿日時: 2003-11-10 16:26
自分でやったり見かけたものでは
・１０行ごとぐらいにヘッダをつける。
・あきらめて上にだけつける。
・１ページの表示数を減らしてページ制御する。
ぐらいでしょうか・・・
|
|---|
- masahiko
- 会議室デビュー日: 2003/03/19
- 投稿数: 1
|
投稿日時: 2003-11-10 16:36
データ部分をインラインフレームにする、という手法も有ります。各セルの幅は自動にせずにすべて指定する必要がありますが。
|
|---|
- ほむら
- ぬし
- 会議室デビュー日: 2003/02/28
- 投稿数: 583
- お住まい・勤務地: 東京都
|
投稿日時: 2003-11-10 18:11
ども、ほむらです。
僕もその部分は考えずに先頭にだけ作る形にしています。
まぁ、いい機会なのでちょっと考えてみようかなーと現在試行錯誤中(笑
ちなみに、列幅offsetWidthを使用すれば何とかなるはずなのですが。。
まだ微妙にずれています。現在調べ中。。。
(たぶん、marginとpaddingの関係だと思うのですが)
---------
以下は列幅の調節(未完成)のみ
| コード: |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script language="JavaScript">
function initialize(){
var header = document.getElementById("header");
var data = document.getElementById("data");
var cell = document.getElementById("data").rows[0].cells;
// セルの幅をデータに合わせる
for(var i=0; i<cell.length; i ++){
header.rows[0].cells[i].width = cell[i].offsetWidth;
}
with( document.getElementById("layer").style ){
// レイヤーの幅をテーブルに合わせる(ieしかあわせてくれない)
width = header.offsetWidth;
// top = 0;
// left = 0;
}
}
</script>
</head>
<body onload="initialize();">
<div id="layer" style="position:relative;z-index:1; background-color:blue;">
<table id="header" style="margin-bottom:0px;background-color:#a0a0e0;" rules="all" border="1">
<tr><td>１</td> <td>２</td> <td>３</td></tr>
</table>
</div>
<table style="margin:0px; z-index:0; position:relative;" rules="all" border="1">
<tbody id="data"style="background-color:#a0e0a0;">
<tr><td>あ13</td> <td>い2</td> <td>う3</td></tr>
<tr><td>あ1</td> <td>い2</td> <td>う3</td></tr>
<tr><td>ああああああああああああ1</td> <td>い2</td> <td>う3</td></tr>
<tr><td>え1</td> <td>お2えええええええええええ</td> <td>か3</td></tr>
<tr><td>え1</td> <td>お2</td> <td>か3</td></tr>
</tbody>
</table>
</body>
</html>
|
|
|---|
- KaNi
- 常連さん
- 会議室デビュー日: 2003/06/04
- 投稿数: 36
- お住まい・勤務地: 埼玉県
|
投稿日時: 2003-11-11 09:49
返信遅くなりました。
ご意見頂いたみなさん、感謝です。
>ほむらさん
これで列幅をダイナミックに取ってごにょごにょすれば出来そうですね。
幅を悩んでいただけに、光が見えました。
試行錯誤してがんばってみます。
サンクスでした。
|
|---|
- ほむら
- ぬし
- 会議室デビュー日: 2003/02/28
- 投稿数: 583
- お住まい・勤務地: 東京都
|
投稿日時: 2003-11-11 12:14
ども、ほむらです。
IEだとうまく動かないのですが^^;;;;
一応ネットスケープとかならいけるかもというのが出来たので途中経過。。。
(テストは和ジラVer1.4ですかけど)
＃でもなんでieだとonscrollが動かないのだろう。。。。
------
<body onload="initialize();" onscroll="moveHeader(event);">
と変更して
<script></script>の部分のみです
| コード: |
|
<script language="JavaScript">
function initialize(){
var header = document.getElementById("header");
var cell = document.getElementById("data").rows[0].cells;
var wkWidth;
// セルの幅をデータに合わせる
for(var i=0; i<cell.length; i ++){
wkWidth = cell[i].offsetWidth;
// ずれた結果の幅で統一^^;;;
header.rows[0].cells[i].width = wkWidth ;
cell[i].width = wkWidth ;
}
// レイヤーの幅をテーブルに合わせる
document.getElementById("layer").style.width = header.offsetWidth + "px";
}
var tid = null; // タイマーのハンドル
function moveHeader(e){
var x, y;
if(e == null ){
x = document.body.scrollLeft;
y = document.body.scrollTop;
}
else {
x = e.pageX;
y = e.pageY;
}
window.status = "X:" + x + " Y:" + y;
// ヘッダを300ms後に移動する
if( tid != null ) window.clearTimeout(tid);
tid = window.setTimeout("updateHeaderPos("+y+");",300);
}
function updateHeaderPos(y){
var offset = document.getElementById('layer').offsetHeight;
window.status += " OFFSET:" + offset;
y = Math.max(0,y-8-offset);
document.getElementById('layer').style.top = y + "px"; // ヘッダを移動
window.scrollBy(0,-offset); // ヘッダで隠れるのでその部分を移動
}
</script>
|
|
|---|
- MMX
- ぬし
- 会議室デビュー日: 2001/10/26
- 投稿数: 861
|
投稿日時: 2003-11-11 14:41
Scrolling of the Table for IE5.0+
- - - - - テーブルのスクロール - - - - -
http://www.geocities.co.jp/Playtown-Domino/4598/HTML_11.html
の最後の例
検索すると、他にもあります。
このサンプルはN7.1、Opera7.21J では動きません。
最新のCSSを調べるとできるかもしれないです
|
|---|
- ほむら
- ぬし
- 会議室デビュー日: 2003/02/28
- 投稿数: 583
- お住まい・勤務地: 東京都
|
投稿日時: 2003-11-11 16:49
ども、ほむらです。
スクロールバーってウィンドウ以外にも作ってくれたんのですね。。
サンプルを参考にして作ってみました。
良い感じなのでそのうち自分のサイトを修正するときにでも
使用しようかなと思っています。
有用な情報感謝です^^
テストはie6.0と和ジラ1.4で行っています。
和ジラで見ることが出来たのでネットスケープでもＯＫだと思うのですが。。。
| コード: |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script language="JavaScript">
function initialize(){
var data = document.getElementById("data");
var header = document.getElementById("header");
var cell = data.rows[0].cells;
var wkWidth;
// セルの幅をデータに合わせる
for(var i=0; i<cell.length; i ++){
wkWidth = cell[i].offsetWidth;
// ずれた結果の幅で統一^^;;;
header.rows[0].cells[i].width = wkWidth ;
cell[i].width = wkWidth ;
}
// レイヤーの幅をテーブルに合わせる
with( document.getElementById("region") ){
document.getElementById("layer").style.width = header.offsetWidth + "px";
style.width = header.offsetWidth + "px"; // スクロールバーを含む幅
wkWidth = header.offsetWidth + (offsetWidth - data.offsetWidth);
style.width = wkWidth + "px"; // スクロールバーを含まない幅で修正
}
}
</script>
</head>
<body onload="initialize();">
<div id="layer" style="border:1px solid black; background-color:blue; ">
<table id="header" style="margin:0px;background-color:#a0a0e0;" rules="all" border="1">
<tr><td>１</td> <td>２</td> <td>３</td></tr>
</table>
<div id="region" style="height:30px; overflow-x:hidden; overflow-y:auto; overflow:auto;" >
<table style="margin:0px; background-color:#a0e0a0;" rules="all" border="1">
<tbody id="data">
<tr><td>あ13</td> <td>い2</td> <td>う3</td></tr>
<tr><td>ああああああああああああ1</td> <td>い2</td> <td>う3</td></tr>
<tr><td>え1</td> <td>お2えええええええええええ</td> <td>か3</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
|
|
|---|
