2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@yambejp

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

2
Last updated at Posted at 2018-01-25

テーブルのヘッダを固定

概要

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

備考

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?