在项目中修改了el-table表头的背景色之后,发现了一个之前没有注意到的问题,表头每一列之间都出现了一条白色边框,看起来很不美观
![](https://img-blog.csdnimg.cn/img_convert/98ae71859e752f26f655181e5f4b44a8.jpeg)
查看样式发现table有一个 border-collapse:separate; 属性, border-collapse设置表格的边框是否被合并为一个单一的边框,一共有三个属性值:
![](https://img-blog.csdnimg.cn/img_convert/6184387cfb113c8e5c0fa0b8a545facb.jpeg)
然后我把 border-collapse的值改为了collapse,也就是合并边框,结果还是不起作用
![](https://img-blog.csdnimg.cn/img_convert/99cd4a9708eb0471355a0497d14e493c.jpeg)
后面调整了每一列的距离,发现间隙居然神奇地消失了
修改前的间距设置:
![](https://img-blog.csdnimg.cn/img_convert/2e660d4a08e48259aaa75a67842787d5.jpeg)
修改后的间距设置:
![](https://img-blog.csdnimg.cn/img_convert/1d35168c334d98ed145be2b96aa28433.jpeg)
但是,在显示设备工具栏的状态下还是能看到间隙,只要关闭设备工具栏就没有了
![](https://img-blog.csdnimg.cn/img_convert/dacbd1ea9acdd8fc71864d91610d0c0e.jpeg)