表格应用----表格第一行保持固定,其余行可以随鼠标滚动
效果图:
先贴代码:
<div class="findBottom">
<div class="table-head">
<table cellpadding="0" cellspacing="0">
<colgroup>
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
</colgroup>
<thead>
<tr>
<th>姓 名</th>
<th>昵 称</th>
<th>籍 贯</th>
<th>原部队</th>
<th>点击查看详情</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table cellpadding="0" cellspacing="0">
<colgroup>
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
</colgroup>
<tbody>
<tr>
<td>尹新年</td>
<td>yxn007</td>
<td>北京</td>
<td>八航校</td>
<td><a href="comradeDeatils.html">详 情</a></td>
</tr>
<tr>
<td>尹新年</td>
<td>yxn007</td>
<td>北京</td>
<td>八航校</td>
<td><a href="comradeDeatils.html">详 情</a></td>
</tr>
<tr>
<td>尹新年</td>
<td>yxn007</td>
<td>北京</td>
<td>八航校</td>
<td><a href="comradeDeatils.html">详 情</a></td>
</tr>
<tr>
<td>尹新年</td>
<td>yxn007</td>
<td>北京</td>
<td>八航校</td>
<td><a href="comradeDeatils.html">详 情</a></td>
</tr>
<tr>
<td>尹新年</td>
<td>yxn007</td>
<td>北京</td>
<td>八航校</td>
<td><a href="comradeDeatils.html">详 情</a></td>
</tr>
</tbody>
</table>
</div>
</div>
解释:
div.table-head为蓝色区域,div.table-body为浅灰色区域。css中,只要让div.table-body高度固定,overflow-y:auto即可。
核心代码如下:
<colgroup>
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
<col style="width: 20%;" /><col />
</colgroup>
一行划分了多少个单元格就对应多少个<col></col>标签,width为相对应单元格所占的宽度比。