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

Posted 2023-03-05

【中文标题】边框折叠不删除表格标题单元格边框

【英文标题】：Border-collapse not removing table header cells borders

【发布时间】：2013-08-08 04:11:01

【问题描述】：

我有一个表格（用于表格数据，而不是用于布局），我希望表格标题中没有边框可见。据我所知，这样做的方法是在CSS中指定border-collaps: 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>

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

【问题讨论】：

发布更多实际代码，或者更好的是，发布小提琴。我使用您显示的代码尝试了小提琴，但我没有看到任何边框，所以细节中一定隐藏了一些东西。

问题的标题具有误导性。 border-collapse 属性确实有效，只是没有做它不正确的预期做的事情（删除边框）。

【参考方案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  */

【讨论】：

谢谢！我试过了，由于某种原因它不再显示背景颜色，所以很难判断是否有边框了。

是否像 一样确定它们的边界？我应该在表头中使用 标签而不是 吗？这可能与边框折叠不起作用有关吗？

我终于让边框消失了！我把“边界崩溃：崩溃；”在 tableStyle2 和“边框样式：无；”下在 tableStyle2 下。换句话说，与您的建议没有根本的不同，而且，虽然我让桌子看起来像我想要的那样，但我仍然不确定为什么它在前几次不起作用。不过，谢谢。