- ベストアンサー
テーブルのヘッダ部分固定でデータ部分をスクロールしたい
テーブルのヘッダ(最初のTR部分)が固定でデータ部分(ヘッダ以下のTR)がスクロールにより移動できるようにしたいのですが可能でしょうか？ フレーム分割で擬似的に作ることは可能と思いますがそれ以外で実現方法を探しております。 よろしくお願いします。
- HTML
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
最近のInternet Explorerに限れば次のようにできます。 <html> <head> <title>テーブルのデータ部分をスクロールするようにするテスト</title> <style> <!-- table { border-collapse: collapse; } .tHeader, .tBody { border: 1px solid black; float: left; } .tHeader { border-bottom: 0px; } .tBody { height: 40px; overflow-y: scroll; clear: left; border-top: 0px; } .tSample th { background-color: silver; border: 1px solid black; } .tSample td { border: 1px solid silver; } .tSample colgroup { word-break: break-all; } .c1 { width: 2em; text-align: right; } .c2 { width: 4em; } .c3 { width: 4em; } .c4 { width: 10em; } br.clear { clear: both; } --> </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="??">を記述して列の幅が等しくなるようにしています。
その他の回答 (2)
- Kuppycat
- ベストアンサー率50% (109/216)
インラインフレームを使えばそれっぽくは見えますが。 基.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で。
お礼
大変参考になりました。ありがとうございました。
- koutarou504
- ベストアンサー率44% (182/407)
なにかしらの手段があるかもしれませんが、 素直に考えると基本的には出来ないと思います。 理由は、最初以外の 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 とは分離する事をお勧めし、 且つ外部ファイルにする事もお勧めしますが、 それはまた別の知識であり・・・。
お礼
大変参考になりました。ありがとうございました。
関連するQ&A
- ヘッダとフッタが固定でコンテンツのみスクロール可能
いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。
- 締切済み
- CSS
- tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- 締切済み
- HTML
- Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか？
すみません、お知恵を拝借させてください。 Tableタグで、一覧部分を縦横スクロールでヘッダー部分を固定で表示できますか？ 下記のソース1のように実現しようとしています。しかしDIVタグに任意の幅を設定(ソース2) すると、テーブルタグの各列に幅設定が出来なくなってしまいます。幅を設定することは可能 か、設定方法をご存知ならば教えてください。 ※IE6限定で、JScript使用OKです。
- ベストアンサー
- HTML
- テーブルデータのスクロール
いつもお世話になっています。 テーブル作成時に、ヘッダ部分のみを固定し、 データ部分をスクロールしたいと思い、調べた結果 <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>部分を実際にスクロール するサンプルソースがみつからず、ここに質問させていただきました。 ご教授お願いいたします。
- ベストアンサー
- HTML
- HTMLテーブルのソートとヘッダ固定が可能なプラグインを教えてください
HTML以下の機能を持ったテーブルを実現したいと思います。 1. ソート 2. ヘッダの固定 何かよいプラグインがあれば教えてくれませんか？ お願いいたします。 現在は、以下のプラグインを使い ソート機能のみ実現しています。 jQuery 1.3.2 TableSorter 2.0.3 ここからの移行が簡単なものがあれば、なお助かります。
- 締切済み
- HTML
- html+CSSでテーブルのスクロール（位置固定）
助けてください。 たとえば、１０項目の列を持つテーブルがあったとします。 レコード件数は１００件だとします。 画面に表示できるのは５項目、１０件だとした場合、 そのテーブルに対して縦横スクロールバーを つけるのですが、その際に縦スクロールバーを下に動かした場合、 <th>列名だけはスクロールさせず、レコード部のみスクロールさせたいです。 また、横スクロールバーを右に動かした場合、５項目は固定で６項目目以降をスクロールさせたいです ※エクセルのウインドウ枠の固定 を適用したイメージ htmlとスタイルシートで実現できますでしょうか？
- ベストアンサー
- CSS
- テーブル内のスクロール
初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか？どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>
- ベストアンサー
- HTML
- 多機能なテーブルの実現方法
現在、WindowsXP、PHP、PostgreSQLでwebアプリケーションを作成しており、DBから読み込んだデータを一覧表示する部分があります。 表示のみではなく、テキストボックス、コンボボックスなども組み込まれており、行の追加、削除、テキストボックス、コンボボックスの内容を変更することが可能です(更新ボタン押下で編集した内容がDBに反映されます)。 このtable部分に「ヘッダ固定の縦スクロール」「同横スクロール(これはヘッダ固定でなくても可)」「ヘッダクリックでソート」という機能を付加したいのです。 出力部分は<tr><td>～</td></tr>でデータを繰り返し出力しており、xml等は使用していません。現在のソースに対してできるだけ修正部分を少なく済ませたいです。フレームワークはprototype.jpを使っているので、これに依存するものは使用可能です。もちろん、フレームワーク依存でないものも可能です。 ttp://tetlaw.id.au/view/blog/table-sorting-with-prototype/を試してみましたが、スクロールさせようとすると、テキストボックスなどがセルに存在する場合にヘッダとデータ部分にずれが生じてしまいます。 何かよい方法、紹介サイトなどありましたら、教えていただきたいと思います。よろしくお願いします。
- ベストアンサー
- HTML
- 表の位置をスクロールしても動かないようにブラウザで固定させたい
○○○○ブラウザ○○○○▲ ■■■■■■■■■■■○□ ■１．位置固定の表■■○□ ■■■■■■■■■■■○□ ◇◇◇◇◇◇◇◇◇◇◇○□ ■■■■■■■■■■■○□ ■■■■■■■■■■■○□ ■■■２。非固定の■■○□ ■■■ 普通の表 ■■○□ ■■■■■■■■■■■○□ ■■■■■■■■■■■○□ ■■■■■■■■■■■○□ ○○○○○○○○○○○○▼ みたいなのを フレームを使わずに １ページ内におさめたいと思っています いろいろ調べましたがわかりません フレームで３ページ分 用意しないとできないのでしょうか？ １。style="position:fixed" としてみましたが、 firefoxでは固定できるようなのですがなぜか、IEでは 固定できませんでした。 ２。のほうは スクロールバーで移動するとスクロールしてくれればいいです。 z-indexは、１を上にする予定です。 フレームを使えばないいことなんですが。(^_^; cgiで動的に作りたいので フレームにすると３回呼び出さないといけないので 負荷がかかるのでさけたいと思っています １ページで済ませたいと思っています。 １。は メニューとして使いたいのでブラウザ画面から動かないようにしたいです。 ２。は、ブラウザのスクロールで移動みたいなのが欲しいです。。 よろしくお願いします m(_ _)m
- ベストアンサー
- HTML
- ヘッダー・フッター固定でコンテンツのみ可変
高さが固定されているヘッダーとフッターをウィンドウの上と下に固定したままで、その間のコンテンツ部分のみを縦方向に可変にする方法は考えられるでしょうか。つまり、 （ヘッダー＋コンテンツ＋フッター）の高さの合計＝ウィンドウの高さ が常に成り立つ方法です。framesetでrowを指定すれば話は早いんですが、XHTMLで実現したいので使えません。 Javascriptを使ってウィンドウの高さを計算してからコンテンツ部分の高さを指定する方法もありますが、その場合はウィンドウのサイズを変えてしまうとヘッダーとフッターがウィンドウに連動せずに画面外や中途半端なところに残ってしまうので、それもだめかなと思いました。 とりあえずコンテンツ部分はどんなに高さが小さくなってもいいので、かなりウィンドウの高さが小さくても、常にヘッダーとフッターがきちんとウィンドウの上下に固定され、コンテンツ部分が可変になるような方法がありましたら教えてください。 ------------------------------- ヘッダー（固定） ------------------------------- コンテンツ（可変） ※この部分のみにスクロールバーが現れることができる。 ------------------------------- フッター（固定） -------------------------------
- 締切済み
- HTML
お礼
大変参考になりました。ありがとうございました。