一種局部固定表頭的實現方案（橫向可跟隨內容一同滾動，縱向鎖定表頭）
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實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
