html Table实现表头固定

最新推荐文章于 2024-08-13 17:19:23 发布

weixin_30840253

最新推荐文章于 2024-08-13 17:19:23 发布

阅读量52

点赞数

原文链接：http://www.cnblogs.com/GinJiong/p/6606152.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
table{
	border-color: #e4e4e4;
	border-collapse: collapse;
	border:0;
}
table th:last-child{
	border-right-color:#f5f5f5;
}
.box{
	width: 540px; 
	border:1px solid #e4e4e4;
}
.table-head{
	padding-right:17px;
	color:#000;
	background: #f5f5f5
}
.table-body{
	width:100%; 
	height:150px;
	overflow-y:scroll;
}
.table-head table,.table-body table{
	width:100%;
}
td{
	width: 10%;
	text-align: center;
}
th{
	width: 10%;
	text-align: center;
}
</style>
<body>
	<div class="box">
	    <div class="table-head">
		    <table border="1" cellpadding="5">
		        <thead>
		            <tr>
			            <th rowspan="2">序号</th>
			            <th rowspan="2">要求</th>
			            <th colspan="3">进度/结果</th>
		            </tr>
		            <tr>
			            <th>评价</th>
			            <th>红票</th>
			            <th>白票</th>
		            </tr>
		        </thead>
		    </table>
	    </div>
   		 <div class="table-body">
		    <table border="1" cellpadding="5">
		        <tbody>
		            <tr>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>我只是用来</td>
		            </tr>
		             <tr>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>我只是用来</td>
		            </tr>
		             <tr>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>我只是用来</td>
		            </tr>
		             <tr>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>我只是用来</td>
		            </tr>
		             <tr>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>我只是用来</td>
		            </tr>
		             <tr>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>1</td>
			            <td>我只是用来</td>
			            <td>我只是用来</td>
		            </tr>
		        </tbody>
		    </table>
   		 </div>
	</div>
</body>
</html>

转载于:https://www.cnblogs.com/GinJiong/p/6606152.html