如何在带有边框折叠的屏幕中显示边框

Question

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

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之间的边界，为什么？(以及如何在th元素之间添加这些边界(？

Answer 1

从table, tr中删除border: 1px solid black。并设置右侧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(，例如：

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

工作代码段，仅带边框的行和带边框的th/td的示例：

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>