JavaScript 常にヘッダーが表示されるテーブル。

function header_resize(){
	document.getElementById('header').style.width
	 = document.getElementById('data').offsetWidth;
}

<table id="header" border="1" width="100px">
	<tr>
		<th with="10%">1</th>
		<th with="20%">2</th>
		<th with="30%">3</th>
		<th with="40%">4</th>
	</tr>
</table>
<div style="width:100px;height:100px;overflow-y:scroll;">
	<table border="1" id="data" width="100%">
		<tr>
			<td with="10%">1</td>
			<td with="20%">2</td>
			<td with="30%">3</td>
			<td with="40%">4</td>
		</tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
	</table>
</div>

ヘッダーとデータの二つのテーブルを作成し、onloadやonresizeイベント時にheader_resize()関数を実行する。IE6とFirefoxで動作するのを確認。両方のテーブルにボーダー属性を設定するとその境目で重複してしまうので、スタイルシートで重複しないようにすると綺麗に表示される。