低価格、短納期、高品質なWebサイト制作|ScuderiaWeb

テーブルのヘッダを固定

テーブルのデータ部分が長くなってしまった場合、スクロールしていくと、ヘッダ部分が見えなくなってしまいます。
このヘッダ部分を固定し、データ部分のみをスクロールさせる方法（エクセルの「ウィンドウ枠の固定」と同様の処理）をCSSで実現します。

但し、いくつかの制限があります。
制限をあまり気にしたくない場合は、JavaScriptでの実装をおすすめします。

• 横スクロールが必要な場合は使用できません。
• tfootを使用する場合、行数が少ないと、データ部分とフッタの間に隙間ができます。

サンプル

ソースコード

(X)HTMLファイル

ヘッダ固定に直接関係のないidやclassは省略しています。
また、データ部分についても長くなるので省略しています。

<div class="table_header_fixed">
	<table cellspacing="0">
		<thead>
			<tr>
				<th>順位</th>
				<th>タイトル</th>
				<th>スタジオ</th>
				<th class="last">興行成績</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="4" class="last">copyright</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>1</td>
				<td>パイレーツ・オブ・カリビアン/ワールド・エンド</td>
				<td>ディズニー</td>
				<td class="last">$961,002,663 </td>
			</tr>
			<tr>
				<td>2</td>
				<td>ハリー・ポッターと不死鳥の騎士団</td>
				<td>ワーナー・ブラザーズ</td>
				<td class="last">$938,450,062 </td>
			</tr>
	（中略）
			<tr>
				<td>10</td>
				<td>ダイ・ハード4.0</td>
				<td>FOX</td>
				<td class="last">$382,118,871 </td>
			</tr>
		</tbody>
	</table>
</div>

CSSファイル

div.table_header_fixed {
	overflow: auto;
	margin: 0 auto;
	width: 534px;
}
* html div.table_header_fixed {
	height: 150px;
}
*+html div.table_header_fixed {
	height: 150px;
}
div.table_header_fixed table {
	width: 500px;
}
div.table_header_fixed table > tbody {
	overflow: auto; 
	height: 150px;
	overflow-x: hidden;
}
div.table_header_fixed thead tr {
	position:relative; 
	top: expression(offsetParent.scrollTop);
}
div.table_header_fixed thead th {
	text-align: center;
	background-color: #E3F2DA;
	color: #5c5c5c;
	border-top: solid 1px #d8d8d8;
	border-left: solid 1px #d8d8d8;
	border-bottom: solid 1px #d8d8d8;
}
div.table_header_fixed tbody td	{
	color: #000;
	padding: 5px;
	border-bottom: solid 1px #d8d8d8;
	border-left: solid 1px #d8d8d8;
	white-space : nowrap; 
}
div.table_header_fixed .last {
	border-right: solid 1px #d8d8d8;
}
div.table_header_fixed tfoot tr {
	position: relative; 
	overflow-x: hidden;
	top: expression(
		parentNode.parentNode.offsetHeight >= offsetParent.offsetHeight ? 
		0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
}
div.table_header_fixed tfoot td {
	text-align: center;
	font-size: 11px;
	background-color: #E3F2DA;
	color: #5c5c5c;
	border: solid 1px #d8d8d8;
}
div.table_header_fixed td:last-child { 
	padding-right: 10px; 
}