• ベストアンサー

テーブルデータのスクロール

いつもお世話になっています。 テーブル作成時に、ヘッダ部分のみを固定し、 データ部分をスクロールしたいと思い、調べた結果 <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>部分を実際にスクロール するサンプルソースがみつからず、ここに質問させていただきました。 ご教授お願いいたします。

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

  • ベストアンサー
  • deadlock
  • ベストアンサー率67% (59/87)
回答No.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のパディングやマージンを調整する などの調整が必要です。

guruguru2
質問者

お礼

ありがとうございます。 いろいろなやり方があるので、検討してみます。

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

その他の回答 (4)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.4

縦スクロールだけのようですが参考URLにJavascriptを使ったサンプルがあります。 (なんとなく開発途上っぽいですが) cssによるスクロールはgecko系(Netscape,firefox,Mozilla)では動くようですね。

参考URL:
http://d.hatena.ne.jp/Mars/20050115
guruguru2
質問者

お礼

ありがとうございます。 >cssによるスクロールはgecko系(Netscape,firefox,Mozilla)では動くようですね。 一応、IEでも可能で、CSSで一旦は作成したのですが、 縦スクロールは良かったのですが、横スクロールをしたときに ヘッダ部分も一緒に動かないので、<thead>を検討していました。 OnScrollイベントとかも調べてみようと思います。

すると、全ての回答が全文表示されます。
回答No.3

<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/
guruguru2
質問者

お礼

回答ありがとうございます。 フレームですか。検討してみます。 ありがとうございます。

すると、全ての回答が全文表示されます。
回答No.2

↓ごめんなさい、IEは不可ですが、 Mozillaならできるらしいです。未確認ですが。

guruguru2
質問者

お礼

再度、回答ありがとうございます。m(_ _)m >Mozilla ですか。ほえ~、初めて聞くブラウザです。 あまり、詳しくなくて…。 調べてみます。(^^)

すると、全ての回答が全文表示されます。
回答No.1

現行では正式対応のブラウザはないのではないですか?

guruguru2
質問者

お礼

回答ありがとうございます。 そうみたいですね…。 ただ、<tbody>タグが出来るってだけ見たいですね(^^;

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

専門家に質問してみよう