如何在 border-collapse 中显示边框？

Question

我只想折叠外侧边界，而不是在 thead 内部：

 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>

不会像Data 1 | Data 2那样显示th之间的边界 Data 1 | Data 2 ，为什么？ （以及如何在th元素之间添加这些边框）？

Answer 1

删除border: 1px solid black from 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>

Answer 2

border-collapse没有你想象的效果。 它只是防止每个单元格边界之间的间隙。 这是没有边界崩溃的情况：

 table { border: 1px solid black; padding: 7px; border-collapse: none; } th,td { border: 1px solid blue; }

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

另一个问题是您将边框添加到tr - 这只是行，它不适用于行内的单元格。 另外仅供参考，在 CSS 中为表格添加边框只会在整个表格的外部添加边框。

要将边框应用于单元格，您需要将边框 CSS 添加到th元素（和td用于表格的 rest），例如：

th, td {
  border: 1px solid blue;
}

使用带边框的行和带边框的th / td s 示例的工作片段：

 table, tr { border: 1px solid black; padding: 7px; border-collapse: collapse; text-align:center; } th { border: 1px solid blue; } tr.showborder td { border: 1px solid red; }

 <table> <thead> <tr> <th>Data 1</th> <th>Data 2</th> <th>Data 3</th> </tr> </thead> <tbody> <tr> <td>this ROW</td> <td> has a</td> <td>border</td> </tr> <tr> <td>this ROW</td> <td> also has a</td> <td>border</td> </tr> <tr class="showborder"> <td>The cells in </td> <td>this row all</td> <td>have borders</td> </tr> <tr class="showborder"> <td>The cells in </td> <td>this row all</td> <td>have borders</td> </tr> </tbody> </table>