コニファ・ロゴ

csstest:[CSS] table要素の一部を固定し、他をスクロール表示

webページで表などを使って解説する際に、ページ全体が長くなりすぎないように表の表示サイズを小さくしスクロールで全体を見せる場合があります。そのようなときのCSSの工夫です。

次の2つのtableは、上がスクロール無し、下がスクロールありのサンプルです。それぞれtd要素の下にtd要素が10行続いています。上はかなり大きな範囲を占めていますが、下はtbodyの高さを全体の1/4程に指定してtd要素を3行のみ表示、残りはスクロールさせるようにしているため、小さく収まっています。

スクロール無しのtable
th要素1 th要素2 th要素3 th要素4 th要素5
td要素1-1 td要素1-2 td要素1-3 td要素1-4 td要素1-5
td要素2-1 td要素2-2 td要素2-3 td要素2-4 td要素2-5
td要素3-1 td要素3-2 td要素3-3 td要素3-4 td要素3-5
td要素4-1 td要素4-2 td要素4-3 td要素4-4 td要素4-5
td要素5-1 td要素5-2 td要素5-3 td要素5-4 td要素5-5
td要素6-1 td要素6-2 td要素6-3 td要素6-4 td要素6-5
td要素7-1 td要素7-2 td要素7-3 td要素7-4 td要素7-5
td要素8-1 td要素8-2 td要素8-3 td要素8-4 td要素8-5
td要素9-1 td要素9-2 td要素9-3 td要素9-4 td要素9-5
td要素10-1 td要素10-2 td要素10-3 td要素10-4 td要素10-5
スクロールありのtable
th要素1 th要素2 th要素3 th要素4 th要素5
td要素1-1 td要素1-2 td要素1-3 td要素1-4 td要素1-5
td要素2-1 td要素2-2 td要素2-3 td要素2-4 td要素2-5
td要素3-1 td要素3-2 td要素3-3 td要素3-4 td要素3-5
td要素4-1 td要素4-2 td要素4-3 td要素4-4 td要素4-5
td要素5-1 td要素5-2 td要素5-3 td要素5-4 td要素5-5
td要素6-1 td要素6-2 td要素6-3 td要素6-4 td要素6-5
td要素7-1 td要素7-2 td要素7-3 td要素7-4 td要素7-5
td要素8-1 td要素8-2 td要素8-3 td要素8-4 td要素8-5
td要素9-1 td要素9-2 td要素9-3 td要素9-4 td要素9-5
td要素10-1 td要素10-2 td要素10-3 td要素10-4 td要素10-5

スクロールありのtableのCSSソース

table.sample {
	table-layout: fixed;
	border-collapse: collapse; 
	}
table.sample thead, table.sample tbody {
	display: block;
	}
table.sample tbody {
	height: 106px;
	overflow-y: scroll; 
	}
table.sample td, table.sample th {
	width: 120px;
	padding: 6px 0;
	border: 1px solid #666;
	text-align: center; 
	}
table.sample th {
	background: #7bf;
	}
table.sample tr:first-child td {
	border-top: none;
	}

 

 

戻るボタン