边框合并无法消除表头单元格的边框

Question

我有一个表格（用于表格数据而非布局），我想在表头中不显示边框。据我所知，做法是在CSS中指定 border-collapse: collapse;。然而，在我的情况下，边框仍然可见。

我在此网站上搜索了一下，并尝试了这里提出的各种解决方案（例如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>

有什么想法是导致这种情况的，如何隐藏表头单元格之间的边框？

- Mhoram

---

请发布更多实际代码，或者更好的方法是发布一个fiddle。我尝试使用您展示的代码创建了一个fiddle，但我没有看到任何边框，因此细节中必须有一些隐藏的东西。 - SaganRitual

问题的标题有误导性。border-collapse 属性确实起作用，只是它没有按照错误的期望去做（移除边框）。 - Jukka K. Korpela

Answer 1

每个 <td> 都决定并负责自己的边框。

.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  */
}

- Scott Pelak

---

谢谢！我尝试了这个方法，但不知何故它不再显示背景颜色，所以很难判断是否还有边框。像<td>一样，<th>是否决定它们的边框？在表头中，我应该使用<thead>标签而不是<tr>吗？这可能与border-collapse无法正常工作有关吗？ - Mhoram

我终于让边框消失了！我在tableStyle2下加入了"border-collapse: collapse;"，在tableStyle2 th下加入了"border-style: none;"。换句话说，这与您建议的基本相同，虽然我让表格看起来像我想要的样子，但我仍然不确定为什么前几次没有成功。不过还是谢谢您。 - Mhoram

我发现这个解决方案，将 border-collapse 设置在 th 元素本身而不仅仅是表格上，对于桌面版 Safari 是必要的。 - Andrew