- ベストアンサー
テーブルデータのスクロール
いつもお世話になっています。 テーブル作成時に、ヘッダ部分のみを固定し、 データ部分をスクロールしたいと思い、調べた結果 <thead>、<tbody>、<tfoot> タグ系を使うまでは分かりました。 が、<tbody>部分は、スクロールせずにただ普通に表示されているだけでした。 OKwebで検索し、サンプルを作成してくださった方がいたので 試しにソースをコピーして、ローカルで試してみましたがダメでした。 ↓ちなみにソースです。width や height の値をいろいろ変えたりはしました。↓ <html> <head> <title>TbodyScroll</title> </head> <body> <table border="1" width="200px" height="100px"> <thead> <tr><th>M1</th><th>M2</th><th>M3</th></tr> </thead> <tfoot> </tfoot> <tbody style="width:180px;height:60px;overflow:scroll"> <tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr> <tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr> <tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr> <tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr> <tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr> <tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr> <tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr> </tbody> </table> </body> </html> 自分なりに位置を固定して試したり、他のサイトも検索してみましたが、<tbody>部分を実際にスクロール するサンプルソースがみつからず、ここに質問させていただきました。 ご教授お願いいたします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
うーん、後はこんな感じですかね。 theadだった部分とtbodyだった部分を別のテーブルに 分けて、元tbodyはdivの中でスクロールさせてます。 IE、Operaだとこれでスクロールにはなります。 <html> <head> <title>TbodyScroll</title> </head> <body> <table border="1" width="200px" height="100px"> <tr><th>M1</th><th>M2</th><th>M3</th></tr> </table> <div style="width:180px;height:60px;overflow:scroll"> <table border="1" width="200px" height="100px"> <tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr> <tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr> <tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr> <tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr> <tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr> <tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr> <tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr> </table> </div> </body> </html> テーブルが繋がっていないのでこのままだと幅などがバラバラに なります。(フレームなどを使っても同じことですが…) ・テーブル、カラムの幅を固定にする ・枠線は細くしておく ・スクロールバーの幅を考慮し、DIVの幅を調整しておく ・divやtableのパディングやマージンを調整する などの調整が必要です。
その他の回答 (4)
- steel_gray
- ベストアンサー率66% (1052/1578)
縦スクロールだけのようですが参考URLにJavascriptを使ったサンプルがあります。 （なんとなく開発途上っぽいですが） cssによるスクロールはgecko系(Netscape,firefox,Mozilla)では動くようですね。
お礼
ありがとうございます。 >cssによるスクロールはgecko系(Netscape,firefox,Mozilla)では動くようですね。 一応、IEでも可能で、CSSで一旦は作成したのですが、 縦スクロールは良かったのですが、横スクロールをしたときに ヘッダ部分も一緒に動かないので、<thead>を検討していました。 OnScrollイベントとかも調べてみようと思います。
- Aquarius172
- ベストアンサー率36% (111/308)
<TBODY>のスクロールに正式対応しているブラウザーは殆どありません。 >>参考 http://www.tohoho-web.com/html/tbody.htm <TABLE>でスクロールを行うには、ちょっと邪道かも知れませんが、<IFRAME>を組み合わせるしかないと思います。 ～～～～～ メイン ～～～～～ <html> <head> <title>TbodyScroll</title> </head> <body> <table border="1" width="200px"> <tr> <th>M1</th> <th>M2</th> <th>M3</th> </tr> <tr height="100px"> <td colspan=3> <iframe src="tdata.html">インラインフレーム対応ブラウザでご覧下さい。</iframe> </td> </tr> </table> </body> </html> ～～～～～ ここまで ～～～～～ ～～～～～ tdata.html ～～～～～ <html> <head> <title>T_Data</title> </head> <body> <table border="1" width="200px"> <tr><td>D1-1</td><td>D1-2</td><td>D1-3</td></tr> <tr><td>D2-1</td><td>D2-2</td><td>D2-3</td></tr> <tr><td>D3-1</td><td>D3-2</td><td>D3-3</td></tr> <tr><td>D4-1</td><td>D4-2</td><td>D4-3</td></tr> <tr><td>D5-1</td><td>D5-2</td><td>D5-3</td></tr> <tr><td>D6-1</td><td>D6-2</td><td>D6-3</td></tr> <tr><td>D7-1</td><td>D7-2</td><td>D7-3</td></tr> </table> </body> </html> ～～～～～ ここまで ～～～～～
- 参考URL：
- http://www.tohoho-web.com/
お礼
回答ありがとうございます。 フレームですか。検討してみます。 ありがとうございます。
- royaltomato
- ベストアンサー率38% (21/55)
↓ごめんなさい、IEは不可ですが、 Mozillaならできるらしいです。未確認ですが。
お礼
再度、回答ありがとうございます。m(_ _)m >Mozilla ですか。ほえ～、初めて聞くブラウザです。 あまり、詳しくなくて…。 調べてみます。(^^)
- royaltomato
- ベストアンサー率38% (21/55)
現行では正式対応のブラウザはないのではないですか？
お礼
回答ありがとうございます。 そうみたいですね…。 ただ、<tbody>タグが出来るってだけ見たいですね(^^;
お礼
ありがとうございます。 いろいろなやり方があるので、検討してみます。