Question

抱歉，我知道之前已经提出了类似的问题，但其中没有任何建议适用于我的案例。我有一个表（对于表格数据，而不是布局），我希望表头中没有可见的边框。据我所知，这样做的方法是在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>

（表格的其余部分尚未写入。）知道造成这种情况的原因是什么，以及如何隐藏表头中单元格之间的边界？

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

边境崩溃不再起作用

1 个答案: