 |
[CSS][JavaScript] 表組のヘッダーを固定する
2015.02.15記
|
|
縦に長い表組をスクロールするとヘッダー部分が隠れてしまい、列の項目名がわからなくなる場合があります。 以下のサイトを参考にスクロール時に表組のヘッダーの固定に挑戦してみようと思います。 http://weboook.blog22.fc2.com/blog-entry-353.html |
HTML
<table class="counter">
<thead>
<tr>
<th class="c1">列１<br>width: 10%</th>
<th class="c2">列２<br>width: 15%</th>
<th class="c3">列３<br>width: 25%</th>
<th class="c4">列４<br>width: 20%</th>
<th class="c5">列５<br>width: 30%</th>
</tr>
</thead>
<tbody>
<tr>
<td class="c1 c"> </td>
<td class="c2"> </td>
<td class="c3"> </td>
<td class="c4"> </td>
<td class="c5"> </td>
</tr>
<tr>
<td class="c"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="c"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS
<style type="text/css">
.c1 { width: 10%; }
.c2 { width: 15%; }
.c3 { width: 25%; }
.c4 { width: 20%; }
.c5 { width: 30%; }
.counter thead { width: 560px; }
/* 表組の連番 */
.counter { counter-reset: cnt; }
.c:before { counter-increment: cnt; content: counter(cnt); }
/* 表組ヘッダ固定 */
.fixed {
position: fixed;
top: 0px;
z-index: 9999;
}
</style>
JavaScript(jQuery)
<script src="jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
var h = $('.counter thead');
var hTop = h.offset().top;
$(window).scroll(function () {
if($(window).scrollTop() >= hTop) {
h.addClass('fixed');
} else {
h.removeClass('fixed');
}
});
});
</script>
サンプル
| 列１ width: 10% |
列２ width: 15% |
列３ width: 25% |
列４ width: 20% |
列５ width: 30% |
|---|---|---|---|---|
|
以下のページに適用してみました http://www.keibunsya.co.jp/modules/features/index.php?content_id=20 |
 2015.03.15 スマホサイト(1) |
 2015年 |
 2015.01.15 ベストセラー+2014 |
ホーム