为何.responstable tr:nth-child(4n+2)仅背景色生效，边框无效？

我遇到了一个奇怪的问题：在这段响应式表格的CSS代码里，.responstable tr:nth-child(4n+2)选择器中的background-color: #f2eaea能正常生效，但border: 19px solid #e6d9d9却完全没效果。这个border属性在其他类里用是正常的，代码是从网上找的，麻烦帮忙看看原因！

相关代码 #

CSS代码

.responstable { margin: 1em 0; width: 100%; overflow: hidden; background: #FFF; color: #570101; border-radius: 10px; border: 1px solid #911515; }
.responstable tr { border: 1px solid #e6d9d9; }
.responstable tr:nth-child(4n+2) { background-color: #f2eaea; border: 19px solid #e6d9d9; }
.responstable th { display: none; border: 1px solid #FFF; background-color: #911515; color: #FFF; padding: 1em; }
.responstable th:first-child { display: table-cell; text-align: center; }
.responstable th:nth-child(2) { display: table-cell; }
.responstable th:nth-child(2) span { display: none; }
.responstable th:nth-child(2):after { content: attr(data-th); }
@media (min-width: 480px) { .responstable th:nth-child(2) span { display: block; } .responstable th:nth-child(2):after { display: none; } }
.responstable td { display: block; word-wrap: break-word; max-width: 7em; }
.responstable td:first-child { display: table-cell; text-align: center; border-right: 1px solid #e6d9d9; }
@media (min-width: 480px) { .responstable td { border: 1px solid #e6d9d9; } }
.responstable th, .responstable td { text-align: left; margin: .5em 1em; }
@media (min-width: 480px) { .responstable th, .responstable td { display: table-cell; padding: 1em; } }

HTML代码

<table class="responstable">
<tr>
<th data-th="Driver details"><span>First name</span></th>
<th>Surname</th>
<th>Date of birth</th>
<!-- <th>Relationship</th> -->
</tr>
<tr>
<td>Steve</td>
<td>Foo</td>
<td>01/01/1978</td>
<!-- <td>Policyholder</td> -->
</tr>
<tr>
<td>Steve</td>
<td>Foo</td>
<td>01/01/1978</td>
<!-- <td>Policyholder</td> -->
</tr>
<tr>
<td>Steve</td>
<td>Foo</td>
<td>01/01/1978</td>
<!-- <td>Policyholder</td> -->
</tr>
</table>

原因分析与解决方法 #

咱来拆解一下这个问题的根源，其实是表格元素的渲染规则在搞鬼：

1. 表格行的border天生“隐形” #

浏览器对<tr>的边框有默认限制——默认情况下表格是border-collapse: collapse（边框合并）模式，这时候tr的border会被单元格（td/th）的边框完全覆盖或者直接忽略。所以你设置的background-color能生效（因为背景是行的独立属性），但border根本没机会显示出来。

2. 响应式布局雪上加霜 #

你的代码里在移动端（屏幕小于480px）把td改成了display: block，这直接破坏了表格的原生结构，<tr>作为块级元素的父容器，它的border自然也没法正常渲染；就算在大屏下td恢复成table-cell，border-collapse的默认规则还是会让tr的border失效。

3. 两种靠谱的解决办法 #

办法一：修改表格边框模型，让tr的border显示

给.responstable加上border-collapse: separate和border-spacing: 0，打破默认的边框合并规则，这样tr的border就能正常渲染了：

.responstable { 
  margin: 1em 0; 
  width: 100%; 
  overflow: hidden; 
  background: #FFF; 
  color: #570101; 
  border-radius: 10px; 
  border: 1px solid #911515;
  border-collapse: separate; /* 关键：取消边框合并 */
  border-spacing: 0; /* 消除单元格之间的间距 */
}

⚠️ 注意：这种方式可能会和表格的border-radius产生冲突，需要额外调整单元格的圆角来适配整体样式。

办法二：给目标行的单元格加边框（更稳定）

既然tr的border不好控制，直接给目标行里的所有td设置边框来模拟行边框，这种方式在任何布局模式下都能稳定生效：

.responstable tr:nth-child(4n+2) { background-color: #f2eaea; }
/* 给目标行的所有td添加上下粗边框 */
.responstable tr:nth-child(4n+2) td {
  border-top: 19px solid #e6d9d9;
  border-bottom: 19px solid #e6d9d9;
}
/* 保留第一个单元格的右边框，避免样式冲突 */
.responstable tr:nth-child(4n+2) td:first-child {
  border-right: 1px solid #e6d9d9;
}

这样调整后，你想要的粗边框效果就能正常显示啦！

内容的提问来源于stack exchange，提问作者Rui Andrade