網頁

▼

2019/7/30

CSS 練習 HTML <table> 表格邊框單線 CSS設定

在HTML的<table>預設沒有框線顯示。

<!DOCTYPE html>
<html>

<head>
</head>

<body>

    <table>
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</body>
</html>



如要顯示表格框線，可套用下面CSS。

table, td {
    border: solid 1px;
}



請Google查詢，加上某個CSS屬性設定能讓結果顯示如下。



提示：查詢關鍵字"html table single border line"，並點選第一個搜尋結果，答案就在裡面。


解答：

使用border-collapse: collapse;。

table, th, td {
    border: solid 1px;
    border-collapse: collapse;
}

沒有留言:

張貼留言