在 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 表格邊框

国产视频appcss 中的 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;
}
/*其它代碼,參考上面的示例代碼*/

運行后顯示效果如下:

表格邊框合并成一條線