重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

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

解決済

  • 質問者：noname#18328
  • 質問日時：
  • 回答数：3件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： grape16
  • 回答日時：

最近の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="??">を記述して列の幅が等しくなるようにしています。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2005/08/24 10:29

No.2

  • 回答者： Kuppycat
  • 回答日時：

インラインフレームを使えばそれっぽくは見えますが。



基.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で。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2005/08/24 10:29

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 とは分離する事をお勧めし、
且つ外部ファイルにする事もお勧めしますが、
それはまた別の知識であり・・・。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2005/08/24 10:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報