版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zjuwwj/article/details/78915487
1. 设计思路
两个table实现,有三个div,最外侧一个,控制全局,一个控制表头,一个控制表身。
2. 注意事项
最外侧的div,需要用overflow-x来控制最横向滚动,因为overflow-x、y在IE中存在兼容性问题,当overflow-x/overflow-y其中之一被设置成’scroll’、’auto’、’hidden’时,另一个还是’visible’,不会被设置为’auto’ 所以,最好使用 “overflow-x:scroll; overflow-y:auto”,这时候,右边的在需要时才会显示。如果希望右边的滚动条一直不显示,那么,可以使用:”overflow-x:scroll; overflow-y:hidden;”
表头和表体的各列需要对齐,所以可以用table-layout:fixed;来固定宽度
当用table-layout:fixed;固定了列宽度,也就会有长的内容会显示不全,那么可以用white-space:normal;来进行换行
对应的css如下:
.table-box {
height: 486px;
width: 570px;
position: relative;
overflow-x: auto;
overflow-y: hidden;
table-layout: fixed;
}
.fixed-head {
position: absolute;
left: 0;
right: 6px;
}
.auto-body {
position: absolute;
height: 450px;
overflow-y: auto;
overflow-x: hidden;
top: 36px;
left: 0;
}
.modal-body .table-preview th, .modal-body .table-preview td {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
对应的html如下:
<div class="modal-body" style="overflow:auto;text-align: center;max-height: 520px">
<div class="table-box">
<div class="fixed-head">
<table class="table table-striped table-preview" style="table-layout: fixed;margin-bottom: -2px;">
<thead>
<tr>
<th>头部</th>
</tr>
</thead>
</table>
</div>
<div class="auto-body">
<table class="table table-striped table-preview" style="table-layout: fixed;">
<tbody>
<tr>
<td>内容</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
不换行处理,超过宽度用…显示,对应的css如下:
.modal-body .table-preview th, .modal-body .table-preview td {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
3. 完整代码如下
本实例是基于bootstrap的:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Document</title>
<style>
.table-box {
height: 486px;
width: 570px;
position: relative;
overflow-x: auto;
overflow-y: hidden;
table-layout: fixed;
}
.fixed-head {
position: absolute;
left: 0;
}
.auto-body {
position: absolute;
height: 450px;
overflow-y: auto;
overflow-x: hidden;
top: 36px;
left: 0;
}
.modal-body .table-preview th, .modal-body .table-preview td {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
</style>
</head>
<body>
<div class="modal-body" style="overflow:auto;text-align: center;max-height: 520px">
<div class="table-box">
<div class="fixed-head">
<table class="table table-striped table-preview" style="table-layout: fixed;margin-bottom: -2px;">
<thead>
<tr>
<th>很长的头部真的很长头部1</th>
<th>头部2</th>
<th>头部3</th>
<th>头部4</th>
<th>头部5</th>
<th>头部6</th>
<th>头部7</th>
</tr>
</thead>
</table>
</div>
<div class="auto-body">
<table class="table table-striped table-preview" style="table-layout: fixed;">
<tbody>
<tr>
<td>很长的头部真的很长内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
<td>内容7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>