ゆちの備忘録

忘れないように。色々メモ。

CSS−Tableのヘッダ固定

tableのヘッダ固定については、今までexpressionを使った方法で指定していたんですが
IE8(標準モード)からは対応してないようなので、他の方法を試してみた結果、
こちらで紹介されていたやり方が一番しっくりきたのでメモ。

 紹介されているサンプルはヘッダが1行の場合。ヘッダが複数行の場合は、theadにheight設定すると上手くいきました。
 注)doctypeの種類によっては効かない


※訂正 2013.1.25※ヘッダが複数行の場合
ヘッダが複数行の場合は、theadにheight設定よりもやはり
thead内のthやtdにそれぞれ高さ指定しておいた方が良さそう。
theadにheight設定だけだと、閲覧環境によってはイマイチな表示に…
ex)
IE9,FF,chromeだとO。th,tdの高さはtheadのheightに合わせて自動調整されるみたいです
IE8だと△。th,tdの高さが未指定なのでペッタンコな行に。

※参考:CSS Expressions のサポート終了について

css(自作サンプル)

▼html