在前端开发过程中,经常会遇到一个需求就是,需要一个表格展示数据,
1、表头固定,内容过多的时候向下活动,表头不跟随移动,若表体内容超长时,表头不能移动,表体内容滚动显示;
2、表格头横向随表格内容横向滚动;
效果展示:
关键技术点:
1、表头(意义上的)和表体(意义上的)都用一个table来显示;
2、因为表体可以纵向滚动,右边多出一个纵向滚动条,所以表体的宽度要比表头的宽度多出17个像素,也就是说,如果要设置表格的宽度是500的话,表体的宽度为100%,那表头的宽度就是减去17个像素,就是calc(100% - 17px);
3、列宽要固定,两个table节点的table-layout样式为fixed
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.table {
border: solid 1px #ddd;
width: 100%;
display: inline-block;
}
th, td {
border-right: solid #ddd 1px;
border-bottom: solid #ddd 1px;
}
th {
background-color: #ddd;
}
</style>
</head>
<body>
<div style="width: 500px">
<div ref="table" class="table">
<div style="width: calc(100% - 17px);overflow-x: hidden;" id="table-head">
<table style="background-color: #fff;width: 100%;table-layout: fixed;">
<thead>
<tr>
<th style="width: 200px">姓名</th>
<th style="width: 200px">性别</th>
<th style="width: 200px">省份证号</th>
<th style="width: 200px">省份证号</th>
<th style="width: 200px">省份证号</th>
</tr>
</thead>
</table>
</div>
<div style="width: 100%;overflow-x: scroll;height: 150px;overflow-y: scroll;" id="table-body">
<table style="background-color: #fff;width: 100%;table-layout: fixed">
<tbody>
<tr>
<td style="width: 200px">张三开始</td>
<td style="width: 200px">男</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">
<img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
<img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
<img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
<img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
<img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
</td>
</tr>
<tr>
<td style="width: 200px">张三1</td>
<td style="width: 200px">男</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td style="width: 200px">张三2</td>
<td style="width: 200px">男</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td style="width: 200px">张三</td>
<td style="width: 200px">男</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td style="width: 200px">张三</td>
<td style="width: 200px">男</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td style="width: 200px">张三</td>
<td style="width: 200px">男</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td style="width: 200px">张三</td>
<td style="width: 200px">男</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td style="width: 200px">张三结束</td>
<td style="width: 200px">男</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
<td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="../../../src/lib/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var $tableHead = $('#table-head');
var $tableBody = $('#table-body');
/*设置同步横向滚动*/
$tableBody.scroll(function (ev) {
$tableHead.scrollLeft($tableBody.scrollLeft()); // 横向滚动条
});
</script>
</body>
</html>