テーブルヘッダーを縦スクロールで固定する方法のシステム開発備忘録です。
テーブルのヘッダーを固定する要望は多いと思いますが、何かと面倒なプログラミングになってしまいます。
テーブルヘッダーを固定する方法
そこで、今回は主にCSSとjQueryでテーブルのヘッダーを固定する方法を調査テストしたので、その備忘録です。
１）テーブルのヘッダー部、ボディー部、フッター部をfloat: left;します。
floatにすることでoverflowが有効になります。
ヘッダー部、ボディー部、フッター部と横に伸びて行く事になります。
そこで後程、折り返しが付くようにtdもしくはthの幅をjqueryにて求めてセットします。
２）ヘッダー部の高さを決めます。
今回のテストでは200pxにしています。
また、スクロールバーが表示されるように設定します。
３）th,tdの高さや幅を要件沿って設定します。
jqueryで立ち上げ時に幅を求めます。
幅が動的に変更されるような場合は再度設定する必要があります。
４）Jqueryでテーブル幅を設定します。
今回は各thの幅＋border幅を足して行きます。
最後にテーブルのborder幅とスクロール幅を足しました。
調整が必要な場合も有るようですので、動かして確かめてください。
コードを下に示します。
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<style>
/*thead,tbody,tfoot*/
#tableA > thead,
#tableA > tbody,
#tableA > tfoot {
float: left; /*overflowを有効化*/
}
#tableA > tbody {
height: 200px;
overflow: auto;
}
/*th,td*/
#tableA th,
#tableA td {
height: 50px;
}
.cA{
width:60px;
}
.cB{
width:50px;
}
.cC{
width:90px;
}
.cD{
width:60px;
}
.cE{
width:40px;
}
.cF{
width:40px;
}
.cG{
width:40px;
}
/*border*/
#tableA {
border: solid 1px black;
}
#tableA > thead > tr > th {
border: solid 1px blue;
background-color:lightblue;
}
#tableA > tbody > tr > td{
border: solid 1px blue;
}
#tableA > tfoot > tr > td {
border: solid 1px blue;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
//thの幅の合計を求める
var w=0;
$("#tableA > thead > tr >th").each(function (i) {
w=w+$(this).width()+2;
});
$("#tableA").width(w + 16+2);
$("#tableA > thead").width(w + 16+2);
$("#tableA > tbody").width(w + 16+2);
$("#tableA > tfoot").width(w + 16+2);
$("#tableA > tr").width(w);
});
</script>
</head>
<body>
<table id="tableA" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
<caption>縦スクロール</caption>
<thead>
<tr>
<th class="cA">A</th>
<th class="cB">B</th>
<th class="cC">C</th>
<th class="cD">D</th>
<th class="cE">E</th>
<th class="cF">F</th>
<th class="cG">G</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cA">A1</td>
<td class="cB">B1</td>
<td class="cC">C1</td>
<td class="cD">D1</td>
<td class="cE">E1</td>
<td class="cF">F1</td>
<td class="cG">G1</td>
</tr>
<tr>
<td class="cA">A2</td>
<td class="cB">B2</td>
<td class="cC">C2</td>
<td class="cD">D2</td>
<td class="cE">E2</td>
<td class="cF">F2</td>
<td class="cG">G2</td>
</tr>
<tr>
<td class="cA">A3</td>
<td class="cB">B3</td>
<td class="cC">C3</td>
<td class="cD">D3</td>
<td class="cE">E3</td>
<td class="cF">F3</td>
<td class="cG">G3</td>
</tr>
<tr>
<td class="cA">A4</td>
<td class="cB">B4</td>
<td class="cC">C4</td>
<td class="cD">D4</td>
<td class="cE">E4</td>
<td class="cF">F4</td>
<td class="cG">G4</td>
</tr>
<tr>
<td class="cA">A5</td>
<td class="cB">B5</td>
<td class="cC">C5</td>
<td class="cD">D5</td>
<td class="cE">E5</td>
<td class="cF">F5</td>
<td class="cG">G5</td>
</tr>
<tr>
<td class="cA">A6</td>
<td class="cB">B6</td>
<td class="cC">C6</td>
<td class="cD">D6</td>
<td class="cE">E6</td>
<td class="cF">F6</td>
<td class="cG">G6</td>
</tr>
<tr>
<td class="cA">A7</td>
<td class="cB">B7</td>
<td class="cC">C7</td>
<td class="cD">D7</td>
<td class="cE">E7</td>
<td class="cF">F7</td>
<td class="cG">G7</td>
</tr>
</tbody>
</table>
</body>
</html>
縦スクロールだけで有れば割と簡単にテーブルヘッダーの固定ができます。
以上、テーブルヘッダーを縦スクロールで固定する方法のシステム開発備忘録でした。
修正2020/06/12
以前載せていたコードが上手く動作しないことを発見しました。
原因は古いjQueryを参照しようとしていてGoogleapis.com から取得できない事でした。
下のバージョンがNGの読み込みです。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
修正したjQueryの参照先を下に示しておきます。
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
修正前のコードを参照してjQueryが動かなかった方が居られましたら、この場を借りてお詫びいたします。申し訳ありませんでしたm(_ _)m