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