热搜：编程 Python Microsoft 编程语言 C++

table 表格边框合并为单一的边框的方法

发布时间：2022-12-25 14:32:33 来源：互联网

.

别自制压力，我们没有必要跟着时间走，只需跟着心态和能力走，随缘，尽力，达命，问心无愧，其他的，交给天。

在 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;
}
/*其它代码，参考上面的示例代码*/

运行后显示效果如下：

表格边框合并成一条线