スクロールバー付きDIV

3702 ワード


<html>

<title>
</title>

<body>
<div style="height:300px; overflow-y:scroll; overflow-x:scroll;">
	<table width="100%" border="1px" cellspacing="0px" style="border-collapse:collapse">
		<thead>
			<tr>
				<td style="background:blue" width="10%">AAA</td>
				<td style="background:blue" width="20%">BBB</td>
				<td style="background:blue" width="50%">CCC</td>
				<td style="background:blue" width="10%">DDD</td>
				<td style="background:blue" width="">DDD</td>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
			<tr>
				<td>AAA</td>
				<td>BBB</td>
				<td>CCC</td>
				<td>DDD</td>
				<td>DDD</td>
			</tr>
		</tbody>
	</table>
<div>

</body>
</html>