Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか？

解決済

質問者：einste
質問日時：2005/07/05 10:54
回答数：3件

すみません、お知恵を拝借させてください。
Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか？

下記のソース1のように実現しようとしています。しかしDIVタグに任意の幅を設定(ソース2)
すると、テーブルタグの各列に幅設定が出来なくなってしまいます。幅を設定することは可能
か、設定方法をご存知ならば教えてください。 ※IE6限定で、JScript使用OKです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3ベストアンサー

回答者： EUR
回答日時：2005/07/06 09:35

ソースを修正してみました。

変更点ですが、
１．セルが勝手に縮まらないようにヘッダーのテーブルサイズを固定しました。
２．ヘッダーのスクロール方法を変更しました。
scrollTopで移動できるのは、overflow:scroll;の記述がある場合のみです。
overflow:scroll;をつけるのは製作の意図と違うと勝手に解釈して、ヘッダーブロックの表示位置をlayerからの相対位置でずらす方法に変更しました。
その方法ですが、layerにもうひとつDIVをはさみ、DIVの相対位置をずらすことで、スクロールについていくようにしました。

以下ソースです
<html>
<head>
<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 ;
}
//↓↓↓　１．ヘッダーのサイズを固定しました
header.style.width = data.offsetWidth;

document.getElementById("layer").style.width = "585px";
document.getElementById("region").style.width = "600px";
}

//↓↓↓　２．ヘッダーの表示方法をDIVの相対位置を変えることで行うようにしました
function SlideHeader() {
//regionがスクロールした分だけDIVの表示位置をマイナスしています
document.getElementById("ViewSpace").style.left = (document.getElementById("region").scrollLeft * (-1)) + "px";
}

</script>
</head>
<body onload="initialize();">
<div id="layer" style="border:1px; overflow-x:hidden; overflow-y:hidden;">

<div id="ViewSpace" style="top:0px; left:0px; position:relative;">
<table id="header" style="margin:0px;" rules="all" border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
</div>

<div id="region" style="height:80px; overflow-x:scroll; overflow-y:scroll" onScroll="SlideHeader()">
<table id="data" style="margin:0px;" rules="all" border="1">
<tr><td>ABCDEFABCDEFABCDABCDEFABCDEF</td><td>ABCDEFABCDEFABCEFABCDEFABCDEF</td><td>ABCDEFABCDEFABCDEFABCDEF</td></tr>
</table>
</div>
</body>
</html>

この回答への補足

ありがとうございます。

なるほど、この方法なら実現できそうです。感謝します。
最終的にdata部分に折り返しが入った場合に、問題がありましたので先に幅設定を
することで回避しています。

function initialize(){
var data = document.getElementById("data");
var header = document.getElementById("header");
var cell = data.rows[0].cells;
var wkWidth;

document.getElementById("layer").style.width = "485px";
document.getElementById("region").style.width = "500px";

for(var i=0; i<cell.length; i ++){
wkWidth = cell[i].offsetWidth;
header.rows[0].cells[i].width = wkWidth;
cell[i].width = wkWidth ;
}
//↓↓↓　１．ヘッダーのサイズを固定しました
header.style.width = data.offsetWidth;
}

すばらしい！！

補足日時：2005/07/06 10:20

通報する

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。とても助かりました。

実現できない場合は、n行おきにヘッダーを挿入する必要があったため。
セル結合しているものを分断するという複雑な処理を実装せねばなりま
せんでした。(必ず1画面にひとつはヘッダーがあることの保証も難しい)

もう少し検証し問題なければ導入に踏み切ろうと思います。勉強になりま
した。すばやい回等、重ね重ね感謝します。

通報する

お礼日時：2005/07/06 10:29

No.2

回答者： EUR
回答日時：2005/07/05 13:57

ソース1の場合、テーブルにDIVのサイズを合わせているようです。

ソース2の場合は、DIVのサイズを固定しているようですね。

overflowについてですが、autoと設定すると、ブラウザに依存した動作を行います。
layerの場合、overflow:auto;としていますので、ヘッダーのテーブルに空白がある分を勝手に削ってしまい、折角設定したセルの幅を勝手に縮められています。
しかしregionの場合、overflow-x:scroll; overflow-y:scroll;がありますので、表示できなかった部分はスクロールで表示し、勝手にセルを縮めたりはしません。
よってヘッダーとデータのセルの幅に違いが出てきてしまいます。

ソース１がうまくいっている要因としては、テーブルにDIVのサイズをあわせているので、勝手に縮める必要がないからです。

で、ここから質問なのですが、ヘッダーとデータのセルの幅を合わせる方法として、
１．ヘッダーもoverflow:scroll;として、データのセルに大きさをあわせる
２．データのセルを折り返しで出力して、ヘッダーのセルに大きさをあわせる
の2通り考えられると思います。

どちらがいいのでしょうか？

この回答への補足

回等ありがとうございます。助かります。

欲しいのは、1?になります。間違いないように、欲しいものを補足説明しますと

要件としては
・1024*768の画面で表示したい。
・横幅は、12ヶ月分のデータ＋四半期計＋上下期＋年度計を表示したい。
　→48列あります。折り返しては見難くなるので、幅を固定して表示したい。

表示する(レイヤーの)横幅を固定して、横長の表を見たいのです。

補足日時：2005/07/05 21:12

通報する

- 0
- 件

通報する

No.1

回答者： poeyama
回答日時：2005/07/05 11:03

ソース添付ください

この回答への補足

ソース1)
<html>
<head>
<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; overflow-x:hidden;overflow-y:hidden; overflow:auto;">
<table id="header" style="margin:0px;" rules="all" border="1">
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</div>
<div id="region" style="height:80px; overflow-x:scroll; overflow-y:scroll; overflow:auto;" onScroll="layer.scrollLeft = region.scrollLeft;">
<table id="data" style="margin:0px;" rules="all" border="1">
<tr><td>ABCDEFABCDEFABCDABCDEFABCDEF</td><td>ABCDEFABCDEFABCEFABCDEFABCDEF</td><td>ABCDEFABCDEFABCDEFABCDEF</td></tr>
</table>
</div>
</body>
</html>

ソース2）関数内を一部書き換え
//with( document.getElementById("region") ){
//・
//}
document.getElementById("layer").style.width = "585px";
document.getElementById("region").style.width = "600px";