記事本文
Re: Sybianの日記 - tbodyをスクロール可能に
Sybianの日記 - tbodyをスクロール可能にのきっかけになった 404 Blog Not Found:CSS - スクロール可能なテーブル w/o JavaScriptも、さらにそのきっかけになったスクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」:phpspot開発日誌も、 ( さらにはおおもとの Scrollable HTML table も ) やたらと遠回りなことをしているなあという印象。
tbody {
height: 300px;
overflow: auto;
}
tbody tr {
height: auto; /* for WinIE */
}table 要素内の各要素の display プロパティをあれこれいじらなくても、 tbody 要素に高さ (height) を指定して、溢れる部分の表示を overflow プロパティで指定するだけで大丈夫だと思います。
tbody 要素の子要素の tr 要素に
height: auto;
を指定しているのは、 IE では 表の行グループ要素に指定した height プロパティの値がセル要素に継承されるというバグがあるためです。
( height プロパティの値は、 CSS1 および CSS2 および CSS 2.1 のいずれにおいても Inherited: no とされているため、 IE が完全準拠しているのは CSS1 までだとしても、 tbody 要素の height プロパティの値を tbody 要素の子要素の tr 要素が継承するというのはおかしいのです。 )
| hello | hi | goodbye |
|---|---|---|
| hello | hi | goodbye |
| test(0) | aa(0) | cols(0) |
| test(1) | aa(1) | cols(1) |
| test(2) | aa(2) | cols(2) |
| test(3) | aa(3) | cols(3) |
| test(4) | aa(4) | cols(4) |
| test(5) | aa(5) | cols(5) |
| test(6) | aa(6) | cols(6) |
| test(7) | aa(7) | cols(7) |
| test(8) | aa(8) | cols(8) |
| test(9) | aa(9) | cols(9) |
| test(10) | aa(10) | cols(10) |
| test(11) | aa(11) | cols(11) |
| test(12) | aa(12) | cols(12) |
| test(13) | aa(13) | cols(13) |
| test(14) | aa(14) | cols(14) |
| test(15) | aa(15) | cols(15) |
| test(16) | aa(16) | cols(16) |
| test(17) | aa(17) | cols(17) |
| test(18) | aa(18) | cols(18) |
| test(19) | aa(19) | cols(19) |
Gecko エンジンでしかスクロールされないのが難点と言えば難点なのですが。 (IE と Opera では tbody 要素の height プロパティの指定が無視されているようです。 Safari は環境が無いので表示確認していません。 )
tfoot は tbody の前に書いた方がいいよ | WWW WATCH にて tfoot の記述位置についてご指摘を受けたので、修正しました。 ( 修正前は thead->tbody->tfoot の順番で書いていました。 ) 数年前にも似たような間違いをしていたことがあったのに何故学習していないんだ !
hxxk.jp さんのアプローチ （私も同じこと書こうとしていたわけですが） だと IE でスクロールバーが出ない
とのことですが、言われてみればそうですね。
個人的には IE が対応していなくても知ったことか、という感じなので「代替案として適切かどうか」と問われると不適切です。
トラックバック送信先
- Sybianの日記 - tbodyをスクロール可能に
-
table 要素内の各要素の display プロパティをあれこれいじらなくても、 tbody 要素に高さ (height) を指定して、溢れる部分の表示を overflow プロパティで指定するだけで大丈夫だと思います。
