- ベストアンサー
Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか？
すみません、お知恵を拝借させてください。 Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか？ 下記のソース1のように実現しようとしています。しかしDIVタグに任意の幅を設定(ソース2) すると、テーブルタグの各列に幅設定が出来なくなってしまいます。幅を設定することは可能 か、設定方法をご存知ならば教えてください。 ※IE6限定で、JScript使用OKです。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ソースを修正してみました。 変更点ですが、 １．セルが勝手に縮まらないようにヘッダーのテーブルサイズを固定しました。 ２．ヘッダーのスクロール方法を変更しました。 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をはさみました。 layerに対して相対位置表示できるようにしています。 このDIVの相対位置を、をregionが右にスクロールした分だけ左に動かします。--> <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> <!-- onScrollを変更しています --> <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>
その他の回答 (2)
- EUR
- ベストアンサー率61% (29/47)
ソース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列あります。折り返しては見難くなるので、幅を固定して表示したい。 表示する(レイヤーの)横幅を固定して、横長の表を見たいのです。
- poeyama
- ベストアンサー率0% (0/1)
ソース添付ください
補足
ソース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";
お礼
ありがとうございます。とても助かりました。 実現できない場合は、n行おきにヘッダーを挿入する必要があったため。 セル結合しているものを分断するという複雑な処理を実装せねばなりま せんでした。(必ず1画面にひとつはヘッダーがあることの保証も難しい) もう少し検証し問題なければ導入に踏み切ろうと思います。勉強になりま した。すばやい回等、重ね重ね感謝します。
補足
ありがとうございます。 なるほど、この方法なら実現できそうです。感謝します。 最終的に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; } すばらしい！！