方案：通过给单元格设置position: sticky属性，达到固定指定单元格的效果
1、固定左侧第一列
通过给左侧第一列的所有单元格设置以下样式，达到固定的效果
position: sticky;
left: 0px; // 因为需要固定的是第一列，因此设置0px，如果需要固定其他列，可根据单元格宽度，设置合适的值
z-index: 100; // 设置合适层级就行
image.png
2、固定表头
给头部所有单元格设置以下样式
position: sticky;
top: 0px; // 与第一点left: 0px;理由类似
z-index: 101;
image.png
3、左上角第一个单元格固定
position: sticky;
left: 0px;
z-index: 102;
image.png
以上三步完成，即可固定表格的头部和第一列啦
在开发过程中，也遇到了以下问题：
1、固定的头和列，在滚动时，会出现边框丢失的情况
没有滚动式，默认展示正常
image.png
滚动后，左右边框丢了
image.png
原因是给table设置了border-collapse: collapse属性，将边框合并了
给table设置以下属性即可
border-spacing: 0;
border-collapse: separate;
image.png
注：如果是通过border属性直接设置边框，发现边框比较厚的话，可以单独通过border-left，border-right，border-inline-end等属性单独设置适合的边框
网友评论