テーブルのヘッダの表示を固定してスクロールする方法

質問

javaスクリプトを使わずにCSSのみで、テーブルのヘッダを固定する方法を探しております。
ご存知の方がいらっしゃいましたら、お教え願います。

回答No.1

ORUKA1951 · ベストアンサー

たとえば
　　<table summary="th">
　　　　<thead>
　　　　　　<tr><td>Color Name</td><td>Hexadecimal Code</td></tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr><td>steelblue</td><td>4682B4</td></tr>
　　　　　　<tr><td>royalblue</td><td>4169E1</td></tr>
　　　　　　<tr><td>cornflowerblue</td><td>6495ED</td></tr>
　　　　　　<tr><td>lightsteelblue</td><td>B0C4DE</td></tr>

とかだと、screenメディアに対して
table[summary="th"] {line-height:1.6em;}
table[summary="th"] thead{position:fixed;z-index:1}
table[summary="th"] td{background-color:white;}
table[summary="th"] tbody{display:block;position:relative;top:1.6em;}
とか。

なお、印刷時には、theadは各ページに配分されるのでスタイルシートの必要はありません。