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

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

スクロールありの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;
	}