平时工作中大多会引用官网封装好的表格组件，于是将基础标签的写法以及注意事项都忘记了，这里说明几个需要注意的点
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” 写在行内样式中就可以了
网友评论