html表格合并内外边框,table 表格边框合并为单一的边框的方法

在 html table 表格元素的默认设置中，如果为每个表格定义它的边框，整体看起来就感觉非常的凌乱，所以这篇博文就说一说，如果将 table 表格的单元格边框合成一条单线。

table 表格边框默认的样式

例代码：html>

Document

table{

width: 300px;

height: 120px;

border: 1px solid #ccc;

text-align: center;

}

td{

border:1px solid #ccc;

}

表格	表格	表格
表格	表格	表格
表格	表格	表格

运行后，如下面所示：

CSS border-collapse 属性，合并 table 表格边框

css 中的 border-collapse 属性可以将表格的边框合并为单一的边框。

其值如下：

collapse：将边框合并为单一的边框

separate：默认值，边框被分开，不会合并

inherit：继承父元素的 border-collapse 属性值。

注意：如果使用 collapse 值时，推荐设置 border-spacing 属性的值为 0。

例：table 表格的边框合并成单一的直线

修改上面的CSS代码如下：table{

width: 300px;

height: 120px;

border: 1px solid #ccc;

text-align: center;

border-spacing: 0;

border-collapse: collapse;

}

/*其它代码，参考上面的示例代码*/

运行后显示效果如下：