表格，表头不动，内容滚动

2015/12/14 40591

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Table</title>
	<style type="text/css">
		.table{
			width: 100%;
			border-collapse:collapse; 
			border-spacing:0; 
		}
		.fixedThead{
			display: block;
			width: 100%;
		}
		.scrollTbody{
			display: block;
			height: 262px;
			overflow: auto;
			width: 100%;
		}
		.table td,.table th {
			width: 200px;
			border-bottom: none;
			border-left: none;
			border-right: 1px solid #CCC;
			border-top: 1px solid #DDD;
			padding: 2px 3px 3px 4px
		}
		.table tr{
			border-left: 1px solid #EB8;
			border-bottom: 1px solid #B74;
		}
		thead.fixedThead tr th:last-child {
			color:#FF0000;
			width: 218px;
		}
	</style>
</head>
<body >
	<table class="table">
		<thead class="fixedThead">
			<tr><th>header</th><th>header two</th></tr>
		</thead>
		<tbody class="scrollTbody">
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
			<tr><td>fuck 1</td><td>fuck 2</td></tr>
		</tbody>
	</table>
</body>
</html>