鉴于之前有几个项目都用到了第一行第一列固定不动的表格，所以整理了一下制作这种表格的方法。
基本原理是把表格分为四个部分，左上角是固定不动的，第一行和第一列是半固定的，只能左右移动或者上下移动，而右下角部分则是可以左右上下滑动，第一行和第一列根据右下角部分的移动来动态设置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的话会出现什么问题呢
可见滚动条占据了一定的位置，其实横向滚动的时候第一行也有这个问题，只不过看得不明显而已，但是在移动端上隐藏滚动条的话是不会出现这种问题啦。
网友评论