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

运行后显示效果如下:

表格边框合并成一条线