html - 如何使用边框折叠在标题中显示边框？

Question

我只想折叠外部边框，而不是顶部的内部:

table, tr {
            border: 1px solid black;
            padding: 7px;
            border-collapse: collapse;
}

th {
            background: #ccccff;
        }

<table>
        <thead>
            <tr>
                <th>Data 1</th>
                <th>Data 2</th>
            </tr>
        </thead>
 </table>

不会显示 th 之间的边界喜欢 Data 1 | Data 2 ， 为什么？ (以及如何在 th 元素之间添加这些边框)？

Answer 1

删除 border: 1px solid black来自 table, tr .并为右侧设置边框 border-right: 1px solid black .另外，使用 :last-of-type伪类，删除最后一个元素的边框。

table, tr {
            /*border: 1px solid black;*/
            padding: 7px;
            border-collapse: collapse;
}

th {
            background: #ccccff;
            border-right: 1px solid black;
        }
        
th:last-of-type {
            border-right: unset;
        }

<table>
        <thead>
            <tr>
                <th>Data 1</th>
                <th>Data 2</th>
                <th>Data 3</th>
                <th>Data 4</th>
                <th>Data 5</th>
                <th>Data 6</th>
                <th>Data 7</th>
                <th>Data 8</th>
                <th>Data 9</th>
                <th>Data 10</th>
            </tr>
        </thead>
 </table>