固定表頭和第一列、內容可滾動的table表格
阿新 • • 發佈:2018-12-01
本文首發我的簡書
鑑於之前有幾個專案都用到了第一行第一列固定不動的表格,所以整理了一下製作這種表格的方法。
基本原理是把表格分為四個部分,左上角是固定不動的,第一行和第一列是半固定的,只能左右移動或者上下移動,而右下角部分則是可以左右上下滑動,第一行和第一列根據右下角部分的移動來動態設定scrollLeft和scrollTop。示意圖如下:
廢話不多說,上程式碼
html部分
<div class="container">
<div id="left-div">
<div id="left-div1">
<table>
<tr>
<th>編號</th>
</tr>
</table>
</div>
<div id="left-div2">
<table id="left-table2"></table >
</div>
</div>
<div id="right-div">
<div id="right-div1">
<table id="right-table1">
<tr>
<th>裝置名稱</th>
<th>裝置型別</th>
<th>故障型別</th>
<th>故障狀態</th>
</tr>
</table>
</div>
<div id="right-div2">
<table id="right-table2"></table>
</div>
</div>
</div>
css部分
*{
margin:0;
padding: 0;
}
table{
width:100%;
text-align:center;
border-collapse:collapse;
border-spacing:0;
}
table td{
word-break: break-all;
word-wrap:break-word;
}
.container{
width: 600px;
height: 500px;
padding: 0;
box-sizing: border-box;
}
#left-div{
width:80px;
float: left;
}
#left-div1{
width: 100%;
}
#left-div2{
width: 100%;
height: 250px;
overflow: hidden;
}
#left-table2{
margin-bottom: 4px;
}
#right-div{
float: left;
width: 240px;
}
#right-div1{
width: 100%;
overflow: hidden;
}
#right-div2{
width: 100%;
height: 250px;
overflow: auto;
}
#right-table1{
width: 320px;
}
#right-table2{
width: 320px;
overflow: auto;
}
th,td{
height: 50px;
width: 80px;
line-height: 50px;
overflow: hidden;
text-align: center;
}
th{
color: #1E304F;
background-color: #F3F8FF;
}
td{
color: #384967;
}
tr:nth-of-type(odd){
background: #E7F2FF;
}
/*可以美化一下滾動條*/
#right-div2::-webkit-scrollbar {/*滾動條整體樣式*/
width: 4px;
height: 4px;
}
#right-div2::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
#right-div2::-webkit-scrollbar-track {/*滾動條裡面軌道*/
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
如果是在移動端可以直接將scrollbar寬高設為0,後面兩部分都不要了,個人感覺這種表格應用場景應該基本都在移動端。
最後js部分很簡單,不過也是關鍵的一步(基於jQuery)
//生成表格內容
let htmlLeft = '';
let htmlRight = '';
for(let i=1;i<=7;i++){
htmlLeft +='<tr>';
htmlLeft +='<td>'+i+'</td>';
htmlLeft +='</tr>';
}
for(let i=1;i<=7;i++){
htmlRight+='<tr>';
htmlRight+='<td>A</td>';
htmlRight+='<td>100</td>';
htmlRight+='<td>500</td>';
htmlRight+='<td>1</td>';
htmlRight+='</tr>';
}
$('#left-table2').html(htmlLeft);
$('#right-table2').html(htmlRight);
//滾動
$('#right-div2').on('scroll',function(){
let top=$(this).scrollTop();
let left=$(this).scrollLeft();
$('#left-div2').scrollTop(top);
$('#right-div1').scrollLeft(left);
})
生成內容沒什麼好說的,主要是第一行和第一列要根據右下角部分一起移動。
最後看看效果圖
ps:有這樣一段css
#left-table2{
margin-bottom: 4px;
}
如果左側不設定margin-bottom的話會出現什麼問題呢
可見滾動條佔據了一定的位置,其實橫向滾動的時候第一行也有這個問題,只不過看得不明顯而已,但是在移動端上隱藏滾動條的話是不會出現這種問題啦。