概要
WEBアプリで一覧表なんかを入力する場合、ヘッダ枠を固定したテーブルにしてくれ的な要望が出たりします。いわゆる「Pushpin Header」とか言われたりするやつです。
実現方法は色々あるそうですが、ブラウザによっては動かなかったりボーダーが変になったりした結果、「んひぃ」的な声が出そうになったので、気持ち悪いですがシンプルな実現方法を残しておきます。
実現方法
- ヘッダ用のテーブルと明細用のテーブルを用意する。
- 明細用のテーブルをDIVで囲む。
- DIVにスクロールするようのスタイルシートを設定する。
- セルの幅を揃える。
コードにすると
↓な感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
td, th{
border : 1px solid black;
}
.header_table {
border-collapse: collapse;
table-layout : fixed;
background-color : lightblue;
}
.detail_table {
border-collapse: collapse;
table-layout : fixed;
margin-top : -1px;
}
.detail_div {
overflow-y : scroll;
height : 040px; /* スクロール領域（高さ） */
width : 280px; /* スクロール領域（幅） */
}
.col1_size {
width : 60px;
}
.col2_size {
width : 80px;
}
.col3_size {
width : 100px;
}
</style>
</head>
<body>
<table class="header_table" id="header_table" name="">
<thead>
<tr>
<th class="col1_size">h1</th>
<th class="col2_size">h2</th>
<th class="col3_size">h3</th>
</tr>
</thead>
</table>
<div class="detail_div">
<table class="detail_table" id="detail_table" name="">
<tbody>
<tr>
<td class="col1_size">val1_1</td>
<td class="col2_size">val1_2</td>
<td class="col3_size">val1_3</td>
</tr>
<tr>
<td class="col1_size">val2_1</td>
<td class="col2_size">val2_2</td>
<td class="col3_size">val2_3</td>
</tr>
<tr>
<td class="col1_size">val3_1</td>
<td class="col2_size">val3_2</td>
<td class="col3_size">val3_3</td>
</tr>
<tr>
<td class="col1_size">val4_1</td>
<td class="col2_size">val4_2</td>
<td class="col3_size">val4_3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
まとめ
スタイルシートの表示やらJavaScript(ECMAScript)やらブラウザ間の差分対応って本当に大変です。