因為平時在html頁面中設計表格樣式時,一般都是使用 DIV+CSS 的方式來實現,很少使用 table 表格元素,而今天圖省事使用 table 表格元素時,發現設置其邊框為的樣式為雙線的形式,所以就正對次問題,百度了一下解決方案。

table 表格的邊框寬度不為0的樣式

HTML代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    table,table tr td { 
        border:1px solid #ccc; 
    }
    table tr td{
        padding: 5px 10px;
    }
</style>
<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>

代碼運行結果:

通過下圖可得知,table 的表格為雙線的形式,但我們可以通過 css 中的 border-collapse 屬性,將雙線樣式的邊框合并為單線形式的邊框。

如何讓table表格邊框成為單線

css border-collapse屬性

border-collapse:屬性,為表格設置合并邊框模型。

其屬性值如下:

separate:默認值。邊框會被分開。

国产视频appcollapse:將邊框會合并為一個單線的邊框

inherit:繼承父元素的 border-collapse 屬性的值,早期IE瀏覽器不支持此值。

實現 table 的單線邊框的辦法

国产视频app為 table 表格的樣式,為入 border-collapse 屬性即可

国产视频app修改以上代碼中的,樣式如下

<style>
    table{
        border-collapse: collapse;
    }
    table,table tr td { 
        border:1px solid #ccc; 
    }
    table tr td{
        padding: 5px 10px;
    }
</style>

運行結果:

QQ截圖20191015212723.jpg