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のコードはこんな感じ。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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は動作の確認はしてないのであしからず…。

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

HTML5 & CSS3ステップアップブック