您的位置:首页 > Web前端 > HTML

table固定头部,表格tbody可上下左右滑动

2017-11-03 13:55 453 查看
当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下:

html代码:

<div class="table_box_big">
<div class="table_box">
<table>
<thead>
<tr>
<th><div>标题一</div></th>
<th><div>标题二</div></th>
<th><div>标题三</div></th>
<th><div>标题标题标题标题标题标题标题标题标题四</div></th>
<th><div>标题标题标题标题标题标题标题标题标题五</div></th>
<th><div>标题标题标题标题标题标题标题标题标题六</div></th>
</tr>
</thead>
</table>
<div class="table_tbody_box">
<table>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</table>
</div>
</div>


css样式:

.table_box_big{overflow-x: scroll;overflow-y: hidden;position: relative;height: 350px;}
.table_box{overflow: hidden;position: absolute;}
.table_tbody_box{height: 300px;overflow: scroll;}
table{border: 1px solid #eeeeee;}
table thead tr th{width: 80px;height: 50px;border-right: 1px solid #eeeeee;text-align: center;word-break: keep-all;padding: 2px 10px;background: skyblue;}
table tbody tr td{width: 80px;height: 50px;border-right: 1px solid #eeeeee;text-align: center;border-bottom: 1px solid #eeeeee;word-break: keep-all;padding: 2px 10px;}


实现效果如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html
相关文章推荐