IE8 beta2対応版IETesterでtableヘッダ固定のCSS定義を確認した

jQuery CSS

更新履歴

2010-01-21
本エントリの記述だと一部ブラウザ（google chrome）でうまく表示されないそうです。下記エントリでの記述方法をお勧めします。

IE8 beta2対応版IETesterがリリースされたので、beta1では未対応だった table ヘッダ固定のCSS定義について再確認してみました。

以前、当サイトで紹介した「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」が、IE8 beta2に対応したv0.2.3をリリースしました。
IETesterは、既存のIE7と衝突することなく、IE8, IE6, IE5.5の確認ができるアプリケーションです。

IE8 beta2に対応した、IEの複数のバージョンが同時に確認できるIETester - coliss

以前、テーブルヘッダの固定化の方法を検討した際、

Javascriptで生成するなら小飼さん方式でいいんじゃないでしょうか(そっちの方が安心)。

Ajax系ライブラリによくあるtableのヘッダ固定の仕組みを調べてみた - cyokodog::diary

という結論になりましたが、その際、以下の３つの方法を考えてみました。

ヘッダ部、ボディ部に個別のテーブルを設け隣接配置させる

上の引用で小飼さん方式と言ってる方法です。ヘッダ部、ボディ部それぞれに個別のテーブルを設け上下に隣接するように配置し一つのテーブルのように見せかけます。ボディ部にのみ overflow:auto(又は scroll)の効いた div をラップすることでデータ部のスクロール表示を可能します。
不恰好で記述が面倒ですが、どのブラウザでも問題なく表示することができます。

demo
スクロール可能なテーブル w/o JavaScript - 404 Blog Not Found
tbody に overflow:auto をかける

一番シンプルでスッキリした理想的な書き方ですが、IE系の対応状況が全滅でした。(Firefox、SafariはOK）
ちなみに今回 IE8 beta2 でも確認しましたが NG でした。

demo
tbodyをスクロール可能に - Sybianの日記
thead をボディ用 div の上方に浮かせて配置する

データ部のスクロールは 1 番目の方法と同様に div でラップしますが、その div に内包されてる thead を position:absolute で浮かせボディの上方に配置します。(ほぼ)プレーンなマークアップで CSS の記述のみで実現できるので最有力な方法かと思ったのですが、最後の最後で IE8 beta1 のみが NG でした。
(IE6,IE7,Firefox,Safari,Opera では正しく表示されました。)

demo
HTML TABLEタグでヘッダを固定にしてデータ部だけスクロール その２ - オレがルールだ！


という訳で、以前のエントリでは

「Javascriptで生成するなら小飼さん方式でいいんじゃないでしょうか(そっちの方が安心)。」

という結論に至ってます。

「theadを浮かせて配置」を IE8 beta2 で確認した。

前回 IE8 のみが NG だったので beta2 で改善されてることに期待し早速試してみました。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css"> 
            th {
                background: #333;
                color:#fff;
            }
            td {
                background: #eee;
            }
            th,td {
                padding:2px;
                width: 100px;
            }
            .wrap1 {
                position: relative;
                padding-top: 24px;
                width: 100%;
            }
            .wrap2 {
                overflow: auto;
                height: 100px;
            }
            thead tr {
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="wrap1">
            <div class="wrap2">
                <table cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <th>no</th>
                            <th>lang</th>
                            <th>script?</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>javascript</td>
                            <td>script</td>
                        </tr>

                        (省略)

                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

IE7

IE8

beta1 と比べると大きく改善されてますが、IE8 の場合のみ th と td の幅が微妙にずれてます。調べたところ table 属性の

cellpadding="0" cellspacing="0"

の設定が原因でした。cellpadding、cellspacing の記述を消したら正しく表示されました。

IE8

position:absolute させた thead には、cellpadding、cellspacing の設定が効かないようです。
cellspacing="0" が効かないのは個人的にはデザイン上つらいのですが、そこさえ目をつむれれば現時点ではこの手法がベストではないでしょうか。
IE8 の正式版では改善されてることを期待したいと思います。