一种局部固定表头的实现方案（横向可跟随内容一同滚动，纵向锁定表头）
1.为了固定表头咱们须要先把表格的head和tbody切分到两个table里： <table class="table-head"></table>和 <table class="table-body"></table>里。html
2.将table-body放在一个table-body-box的div里设置y轴方向能够滚动，x轴方向不可滚动，这样表内容就能在本身的区域实现垂直方向的滚动了。
3.将table-head设置为absoluteweb
4.将table-head和table-body-box的div放入一个table-box的div中，设置横向x轴能够滚动，y轴不可滚动。
这样两个表就会在x方向滚动，y轴不滚动，表头就垂直方向固定在垂直方向，横向滚动在table-box出现滚动条的时候，内部的表格头和表格内容由于没有设置为fixed，因此会被滚动。flex
表头和表内容的横向方向滚动能力（实际上是父级overflow-x:scroll样式赋予的）。表内容的垂直方向滚动是经过表内容外套的table-body-box设置overflow-y:scroll来实现的。code
5.代码以下：htm
<style>
.table-box {
height: 100%;
width: 100%;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
position: relative;
}
.table-head {
background-color: #F9FAFE;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
color: #777;
table-layout: fixed;
position: absolute;
top:0;
}
.table-head th {
border-collapse: collapse;
height: 40px;
}
.table-body-box {
table-layout: fixed;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
height: 100%;
box-sizing: border-box;
padding-top: 50px;
}
.table-body{
table-layout: fixed;
width: 100%;
background-color: white;
text-align: center;
}
.table-body tr:nth-child(even) {
background-color: #F9FAFE;
}
</style>
html以下
<div style="height:500px">
<div class="table-box">
<table class="table-head" style="width: 900px">
<colgroup>
<col width="150">
<col width="100">
<col>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Company</th>
<th>Provision</th>
<th>Following in Point</th>
<th>Customer Grade</th>
<th>Allocated Time</th>
<th>Follow up Person</th>
<th>Department</th>
</tr>
</thead>
</table>
<div class="table-body-box" style="width: 900px">
<table class="table-body">
<colgroup>
<col width="150">
<col width="100">
<col>
<col>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
<tr>
<td>Shanghai Yinghuang</td>
<td>FOB</td>
<td>Dumped Cabinet</td>
<td>Important</td>
<td>2017-10-28</td>
<td>Nathan</td>
<td>Sales Department</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
6.能够结合flex作到自适应表头和表格内容it
相关文章
- 1. bootstrap table 表头固定 、冻结列、横向纵向滚动条
- 2. 竖向表头固定，横向随内容滚动，纯css，列宽有问题
- 3. 表头固定内容可滚动表格的3种实现方法
- 4. 转载-------------表头固定内容可滚动表格的3种实现方法
- 5. 表格表头固定,内容多时滚动内容
- 6. Android实现类似Excel的大表格，可横向纵向滑动，带表头
- 7. 网页中单一表格横纵表头锁定的细节
- 8. 固定表头和第一列、内容可滚动的table表格
- 9. 移动端实现表头固定，tbody滚动，三种方法
- 10. CSS实现固定表头 内容溢出滚动
- 更多相关文章...
- • ionic 头部与底部 - ionic 教程
- • ionic 头部和底部 - ionic 教程
- • Docker容器实战(一) - 封神Server端技术
- • ☆基于Java Instrument的Agent实现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse设置粘贴字符串自动转义
- 2. android客户端学习-启动模拟器异常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout问题
- 4. MYSQL8.0数据库恢复 MYSQL8.0ibd数据恢复 MYSQL8.0恢复数据库
- 5. 你本是一个肉体，是什么驱使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一个肉体，是什么驱使你前行【3】
- 9. 你本是一个肉体，是什么驱使你前行【2】
- 10. 【资讯】LocalBitcoins达到每周交易比特币的7年低点
欢迎关注本站公众号,获取更多信息
