最近做到了要实现固定表头的一个数据列表table,在网上查了一些资料,总结出的办法,望大家提出建议或意见。
其原理大概如下:
将tbody用一个固定高度的div包起来,并使tbody的内容高度超过这div的高度,这样便会出现滚动条。同时因为要求表头固定,所以用另外一个table将表头写出来,但是要注意的是他的列宽要与table-content里的table列宽一致,这样就可以达到预期的效果。其实最主要的还是用到了colgroup和col标签,来格式化th和td的原理。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main{width: 100%;}
table {
border-collapse: collapse;
border-spacing: 0;
}
.table {
width: 100%;
border: 1px solid #dcdcdc;
}
.table thead th,.table tbody td {
padding: 5px 10px;
vertical-align: middle;
word-break:break-all;
height: 30px;
text-align: center;
border: 1px solid #dcdcdc;
}
.table thead th{
font-size: 14px;
font-weight: 500;
}
.table tbody td {
height: 20px;
border-bottom: none;
}
.table tbody tr:first-child td {
border-top: none;
}
.table-content {
height: 50px;
overflow-x:hidden;
overflow-y:auto;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
}
.table-content .table {
border: none;
}
.table-content tbody td {
border-right: none;
}
</style>
</head>
<body>
<div class="main">
<div class="tabBox">
<table class="table">
<colgroup>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="200"></col>
<col width="200"></col>
<col width="200"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="200"></col>
<col width="100"></col>
<col width="*"></col>
</colgroup>
<thead>
<tr>
<th><input class="selectAll" type="checkbox" name="namecheck" value="" /></th>
<th>序号</th>
<th>商品名称</th>
<th>订单号</th>
<th>下单时间</th>
<th>账单金额(元)</th>
<th>总数量</th>
<th>已出库</th>
<th>待出库</th>
<th>联系人</th>
<th>联系人电话</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
</table>
<div class="table-content">
<table class="table">
<colgroup>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="200"></col>
<col width="200"></col>
<col width="200"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="100"></col>
<col width="200"></col>
<col width="100"></col>
<col width="*"></col>
</colgroup>
<tbody>
<tr>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男男男</td>
<td>男男男男男男</td>
<td>男男</td>
<td>男</td>
<td>男男</td>
</tr>
<tr>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男男男</td>
<td>男男男男男男</td>
<td>男男</td>
<td>男</td>
<td>男男</td>
</tr>
<tr>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男男男</td>
<td>男男男男男男</td>
<td>男男</td>
<td>男</td>
<td>男男</td>
</tr>
<tr>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男</td>
<td>男男</td>
<td>男男男</td>
<td>男男男</td>
<td>男男男男</td>
<td>男男男男男男</td>
<td>男男</td>
<td>男</td>
<td>男男</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>