ベストアンサー

テーブルのヘッダ部分固定でデータ部分をスクロールしたい

2005/07/26 15:53

テーブルのヘッダ(最初のTR部分)が固定でデータ部分(ヘッダ以下のTR)がスクロールにより移動できるようにしたいのですが可能でしょうか？フレーム分割で擬似的に作ることは可能と思いますがそれ以外で実現方法を探しております。よろしくお願いします。

noname#18328

HTML
回答数3
ありがとう数6

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

grape16
ベストアンサー率55% (52/93)

2005/07/26 21:19 回答No.3

最近のInternet Explorerに限れば次のようにできます。 <html> <head> <title>テーブルのデータ部分をスクロールするようにするテスト</title> <style>  </style> </head> <body> <div class="tSample"> <div class="tHeader"> <table> <colgroup class="c1"></colgroup> <colgroup class="c2"></colgroup> <colgroup class="c3"></colgroup> <colgroup class="c4"></colgroup> <tr><th></th><th>A</th><th>B</th><th>C</th></tr> </table> </div> <div class="tBody"> <table> <colgroup class="c1"></colgroup> <colgroup class="c2"></colgroup> <colgroup class="c3"></colgroup> <colgroup class="c4"></colgroup> <tr><th>1</th><td>北海道</td><td>札幌</td><td>ラーメン</td></tr> <tr><th>2</th><td>青森</td><td>青森</td><td>りんご</td></tr> <tr><th>3</th><td>岩手</td><td>盛岡</td><td>わんこそば</td></tr> <tr><th>4</th><td>宮城</td><td>仙台</td><td>笹かま</td></tr> <tr><th>5</th><td>福島</td><td>福島</td><td>輪箱飯</td></tr> </table> </div> </div> <br class="clear" /> </body> </html> ヘッダ部とデータ部をdivで囲って，データ部をoverflow-y: scrollでスクロールできるようにしています。ヘッダ部とデータ部で同じ<colgroup class="??">を記述して列の幅が等しくなるようにしています。

質問者

お礼 2005/08/24 10:29

大変参考になりました。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

Kuppycat
ベストアンサー率50% (109/216)

2005/07/26 17:18 回答No.2

インラインフレームを使えばそれっぽくは見えますが。基.htm <table border="1"> <tr><th width="200px">項目１</th><th width="600px">項目２</th></tr> </table> <iframe src="data.htm" width="800px" height="400px" frameborder="0"> </iframe> data.htm <html> <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> <table border="1"> <tr><td width="200px">項目１</td><td width="600px">項目２</td></tr> </table> </body> </html> こんな感じ。文字の大きさとかで崩れちゃったりもするので、あんまり期待はしないほうが良いかもです。あ、このHTMLは即興なので、設定は出来ればちゃんとID、CSSで。

質問者

お礼 2005/08/24 10:29

大変参考になりました。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

koutarou504
ベストアンサー率44% (182/407)

2005/07/26 16:59 回答No.1

なにかしらの手段があるかもしれませんが、素直に考えると基本的には出来ないと思います。理由は、最初以外の TR を１つのまとまりとして扱えないみたいだからです。なんとか修飾を用いて個々の TR, TD を同一視する事は出来るのですが。唯一、テーブル自体を DIV 等でひとまとめには出来るので、 <div> <table border="1"> <caption></caption> <tbody> <tr><th>TEST00A</th><th>TEST00B</th><th>xx</th></tr> <tr><td colspan="3"> <div style="height:3em;overflow:scroll;"> <table border="1"> <caption></caption> <tbody> <tr><th colspan="2"></th></tr> <tr><td>test01a</td><td>test01b</td></tr> <tr><td>test02a</td><td>test02b</td></tr> </tbody> </table> </div> </td></tr> </tbody> </table> </div> 上記の考え方で、後はセルの幅を固定すれば（フレーム分割と同じ発想）なんとか・・・。フレームではないですが、スタイルシートを使っているという点が少々配慮のいる処で・・・。尚、スタイルシートは出来れば ID,CLASS 指定を用いて HTML とは分離する事をお勧めし、且つ外部ファイルにする事もお勧めしますが、それはまた別の知識であり・・・。

質問者