CSS
JavaScript
jQuery

[test012] テーブルのヘッダを固定

テーブルのヘッダを固定

概要

HTMLのテーブルをスクロールさせながら固定

ソース

HTML

test012.htm
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="javascript/text" src="test012.js">
<link rel="stylesheet" type="text/css" href="test012.css">

<title>テーブルのヘッダを固定</title>
</head>
<body>
<div id="d0">
<div class="dummy"></div>
<table class="table-scroll">
<thead>
<tr><th>aaa</th><th>bbb</th><th>cccccccccccccccccccc</th><th>ddd</th><th>eee</th></tr>
</thead>
<tr><td>xxxxxxxxxxxxxxxxxx</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>xxxxxxxxxxxxxxxxxx</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>xxxxxxxxxxxxxxxxxxx</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>xxxxxxxxxxxxxxxxx</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>xxxxxxxxxxxxxxxxxx</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
</tbody>
</table>
<div class="dummy"></div>
<table class="table-scroll">
<thead>
<tr><th>aaa</th><th>bbb</th><th>cccccccccccccccccccc</th><th>ddd</th><th>eee</th></tr>
</thead>
<tr><td>xxxxxxxxxxxxxxxxxx</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>xxxxxxxxxxxxxxxxxx</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>xxxxxxxxxxxxxxxxxxx</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>xxxxxxxxxxxxxxxxx</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>xxxxxxxxxxxxxxxxxx</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
</tbody>
</table>
</div>
</body>
</html>

CSS

test012.css
.dummy{height:200px;}
table{border-collapse:collapse;}
th,td{border:1px solid #000000;}
#d0{height:1000px;padding:10px;}
/* jQueryで処理しせずCSSで処理してもいい
.scroll-child{height:300px;/*任意の高さを指定*/}
.scroll-child{overflow-y:scroll;overflow-x:hidden;position:relative;}
.scroll-head{position:absolute;}
.scroll-head thead{background-Color:red;}
.scroll-head tbody{visibility:collapse;background-Color:red;}
*/

Javascript

test012.js
$(function(){
  $('.table-scroll').each(function(){
    $(this).wrap($('<div>').addClass('scroll-parent')).wrap($('<div>').addClass('scroll-child'));
    $(this).clone(true).removeClass('table-scroll').addClass('scroll-head').appendTo($(this).closest('.scroll-parent'));
    $(this).closest('.scroll-parent').find('.scroll-head').css('top',$(this).closest('.scroll-parent').offset().top);
  });
    $('.scroll-child').css({"height":"300px","overflow-y":"scroll","overflow-x":"hidden","position":"relative"});
    $('.scroll-head').css({"position":"absolute"});
    $('.scroll-head thead').css({"background-Color":"red"});
    $('.scroll-head tbody').css({"visibility":"collapse","background-Color":"red"});
});

動作確認

  • IE8(IE11のエミュレータでOK)、IE7以下は挙動が変
  • Firefox57
  • Chrome63

備考

テーブルを複製してヘッダだけ表示するのであまり美しくないが合わせやすい