html5メモ Excelのウィンドウ枠固定っぽくテーブルの見出しを固定してみる

プログラミング

HTML5標準で対応してくれればいいのに…なんて事言ってても始まらないので、やってみる。

まず、普通にテーブルを書くとこんな感じに表示される。

17555_03

ポイントはCSSの定義っぽい。
今回気をつけたところはこんな感じ。

  • tableの幅を固定する(widthを指定する)
  • theadを左寄せにする(floatをleftに指定する)
  • theadではみ出た部分は非表示にする(overflowをhiddenに指定する)
  • tbodyを左寄せにする(floatをleftに指定する)
  • tbodyではみ出た部分があったらスクロールを表示する(overflowをautoに指定する)
  • tbodyの幅を固定する(widthを指定する)
  • tbodyの高さを固定する(heightを指定する)
  • 行の幅を固定する(thをtdのwidthが合うように指定する)

HTMLのコードはこんな感じ。

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            table {
                border-collapse: collapse;
                width: 160px;   /* ポイント */
            }
            thead {
                float: left;    /* ポイント */
                overflow: hidden;   /* ポイント */
            }
            tbody {
                float: left;    /* ポイント */
                overflow: auto; /* ポイント */
                height: 100px;  /* ポイント */
                width:160px;    /* ポイント */
            }
            th, td {
                border: 1px solid gray;
                width: 30px;    /* ポイント */
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>no</th>
                    <th>R</th>
                    <th>G</th>
                    <th>B</th>
                </tr>
            </thead>
            <tbody>
                <tr style="background-color:#ff0000;">
                    <td>1</td>
                    <td>ff</td>
                    <td>00</td>
                    <td>00</td>
                </tr>
                <tr style="background-color:#00ff00;">
                    <td>2</td>
                    <td>00</td>
                    <td>ff</td>
                    <td>00</td>
                </tr>
                <tr style="background-color:#0000ff;">
                    <td>3</td>
                    <td>00</td>
                    <td>00</td>
                    <td>ff</td>
                </tr>
                <tr style="background-color:#ffff00;">
                    <td>4</td>
                    <td>ff</td>
                    <td>ff</td>
                    <td>00</td>
                </tr>
                <tr style="background-color:#ff00ff;">
                    <td>5</td>
                    <td>ff</td>
                    <td>00</td>
                    <td>ff</td>
                </tr>
                <tr style="background-color:#00ffff;">
                    <td>6</td>
                    <td>00</td>
                    <td>ff</td>
                    <td>ff</td>
                </tr>
                <tr style="background-color:#ffffff;">
                    <td>7</td>
                    <td>ff</td>
                    <td>ff</td>
                    <td>ff</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

実行してみるとこんな感じ。

17555_01

下の方までスクロールさせるとこんな感じ。

17555_02

初期状態でtheadの下側の枠線とtbodyの上型の枠線がかぶって表示されるので、枠線が太く表示されちゃうのがとっても気になる…。
この辺はCSSをいじってなんとかするところなのかなぁ…。

あと、動作を確認したのはFirefox 22のみ。
いつもHTMLの解釈で話題になるIEは動作の確認はしてないのであしからず…。

まま、明日への自分へのメモってことで。