别自制压力，我们没有必要跟着时间走，只需跟着心态和能力走，随缘，尽力，达命，问心无愧，其他的，交给天。
在 html table 表格元素的默认设置中，如果为每个表格定义它的边框，整体看起来就感觉非常的凌乱，所以这篇博文就说一说，如果将 table 表格的单元格边框合成一条单线。
table 表格边框默认的样式
例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width: 300px;
height: 120px;
border: 1px solid #ccc;
text-align: center;
}
td{
border:1px solid #ccc;
}
</style>
</head>
<body>
<table>
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
<tr>
<td>表格</td>
<td>表格</td>
<td>表格</td>
</tr>
</table>
</body>
</html>运行后，如下面所示：
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;
}
/*其它代码，参考上面的示例代码*/运行后显示效果如下：
以上就是table 表格边框合并为单一的边框的方法。幸福不是在于我们多么努力的去争取是在于我们多么努力的去珍惜！更多关于table 表格边框合并为单一的边框的方法请关注haodaima.com其它相关文章！
