html - 边框折叠不删除表格标题单元格边框

Question

我有一个表格（用于表格数据，而不是用于布局），并且我希望表格标题中没有边框可见。据我所知，这样做的方法是border-collaps: collapse;在 CSS 中指定。但是，在我的情况下，边界仍然可见。

我搜索了这个站点，尝试了这里建议的各种解决方案（例如border-spacing: 0px，display: none），但没有任何效果。边界仍然存在。

我的 CSS 中的代码现在如下所示：

.tableStyle2 {
    border-spacing: 0px;
}

.tableStyle2 th {
    background-color: #1B7AE0;
    border-color: #1B7AE0;
    border-spacing: 0px;
}

.tableStyle2 tr {
    display: none;
}

对应的HTML代码如下：

<table class = "tableStyle2" width = "100%">
<tr>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
<th> ... </th>
</tr>
</table>

知道是什么原因造成的，如何隐藏表格标题中单元格之间的边框？

Answer 1

每个<td>s 确定（并负责）自己的边界。

.tableStyle2 {
    border-spacing: 0px;
    border-collapse: collapse;  /* <--- add this so all the internal <td>s share adjacent borders  */
    border: 1px solid black;  /* <--- so the outside of the <th> don't get missed  */
}

.tableStyle2 th {
    background-color: #1B7AE0;
    border-color: #1B7AE0;
    border-spacing: 0px;  /* <---- won't really need this if you have border-collapse = collapse */
    border-style: none;   /* <--- add this for no borders in the <th>s  */
}

.tableStyle2 tr {
   /* display: none; <--- you want to show the table  */
}