表格(或其他格子布局)内边框重合问题的解决方法

问题

实现表格元素,在设置表格的边框时发现内边框发生了重合的情况,如下图所示:
在这里插入图片描述

解决方法

给表格元素添加 border-collapse: collapse

table{
    
    
	border-spacing: 0;
	border-collapse: collapse;
}

如果有的小伙伴产生问题的可能不是表格元素,而是类似于表格的 grid 布局,可以使用以下方法:

margin: 0 -1px -1px 0;

这个方法的原理是利用margin的负值来使并排的边框线完全重合。

猜你喜欢

转载自blog.csdn.net/jiangjunyuan168/article/details/126631633