HTML-CSS:スクロールするテーブル。

html


効率が良いのか悪いのか分かりませんが、自分はたまにこういった実装を求められるのでメモとして。

<html>
<style>
div.scroll_header {
	position	: relative;
	top			: 0px;
	left		: -3px;
	width		: 315px;
	overflow-y	: auto;
}
div.scroll_header table {
	width		: 300px;
}
div.scroll_body {
	position	: relative;
	top			: 0px;
	left		: -3px;
	width		: 315px;
	height		: 100px;
	overflow-y	: scroll;
}
div.scroll_body table {
	width		: 300px;
}
</style>
<body>
<h1>TIPS001</h1>
<div class="scroll_header">
<table border="1">
<tr><th width="100px">col1</th><th width="100px">col2</th><th width="100px">col3</th>
</tr>
</table>
</div>
<div class="scroll_body">
<table border="1">
<tr><td width="100px">1</td><td width="100px">aaa</td><td width="100px">bbb</td></tr>
<tr><td>2</td><td>aaa</td><td>bbb</td></tr>
<tr><td>3</td><td>aaa</td><td>bbb</td></tr>
<tr><td>4</td><td>aaa</td><td>bbb</td></tr>
<tr><td>5</td><td>aaa</td><td>bbb</td></tr>
<tr><td>6</td><td>aaa</td><td>bbb</td></tr>
<tr><td>7</td><td>aaa</td><td>bbb</td></tr>
<tr><td>8</td><td>aaa</td><td>bbb</td></tr>
<tr><td>9</td><td>aaa</td><td>bbb</td></tr>
<tr><td>10</td><td>aaa</td><td>bbb</td></tr>
</table>
</div>
</body>
</html>

tableを実質２つ作らなくてはならない事で列サイズの指定がより厳密に求められるのがちょっと難点ですね。もっと良い方法がないか気になります。