前端Table标签 表格固定行列，设置相同宽度单元格等自适应问题

平时工作中大多会引用官网封装好的表格组件，于是将基础标签的写法以及注意事项都忘记了，这里说明几个需要注意的点

1.设置表格td的宽度为相同宽度，只需要一个属性

table-layout:fixed;

设置了这个属性后，虽然每个格子的宽度一样，但还是可以单独对当前列的宽度进行设置哦

2.表格滚动条

平时使用表格标签过程中可能发现即使设置了最外层盒子的overflow hidden属性，表格依然整体展示在容器里面，挤到换行也不出滚动条，这是因为没有给表格设置宽度，默认表格的宽和容器一样，所以如果给表格设置的宽度超过了容器的宽度就会出现滚动条啦

3.滚动条的样式设置

这里只说最主要的属性，滚动条出现在哪个容器就给哪个容器设置，例如容器的类名为tableBox

.tableBox::-webkit-scrollbar{            display:block;  width:5px;    height:5px;      border:1px solid transparent; }    这里的值自己设置就好  设置滚动条的展示基础状态

.tableBox::-webkit-scrollbar-button{  display:none；    }    设置滚动条是否展示两侧的按钮

.tableBox::-webkit-scrollbar-thumb{  background:rgba(39,39,39,0.15);      border-radius:5px; }    设置滑动的按钮样式，颜色边框等

.tableBox::-webkit-scrollbar-trank{  background:rgba(39,39,39,0.15);      border-radius:5px; }  设置滑轨的背景颜色等

4.表格行列的固定

这里需要用到一个非常重要的属性position:sticky;也就是粘性定位，然后再设置top,left的具体位置就可以了，比如，我只想要固定表头和首列，那就可以在使用粘性定位的同时，给表头行一个top:0px；首列left:0px;  固定几行几列其实就根据具体情况复给相应的值就可以实现，都是一个道理。

table thead tr th{ position:sticky; top:0;} 表头固定在原地

table>tbody>tr>td:nth-child(1){  position:sticky;left:0; }  表体第一列都固定在原地

不要忘了行列的公共部分，也就是左上角的那一个格子

table>thead>tr>td:nth-child(1){ position:sticky; top:0px; left:0px;} 上下同时需要固定为0

除此之外还会出现问题

①层级不对，只需要提高首行和首列的层级即可

②调整层级后，只有文字固定在原地了，其实格子是固定住了，只是之前的格子颜色是设置给了tr，在滑动中滑动的格子会插在tr和当前固定的th或者td中间的，所以注意尽量把表格的颜色样式加给td或者th，这样背景随时都会铺在格子下面，下面的文字也就不会透过来了

5.表格边框设置

给table标签添加 属性 border=“1”  cellspacing=“0”  cellpadding=“0”  写在行内样式中就可以了