如何使用CSS实现跨rowspan表格单元格的顶部边框效果？

我看了你的需求和目前尝试的代码，问题出在你只选中了每行的第二个单元格添加边框，但效果图里是每行从第二列开始的所有单元格都需要上边框，同时第一列单元格不需要这个边框。另外还有个关键细节：默认表格的单元格边框是独立的，需要先合并边框才能让线条显示连贯。

正确的CSS解决方案 #

你可以用两种方式实现目标效果：

方式一：使用:not(:first-child)伪类

table {
  border-collapse: collapse; /* 合并表格边框，避免边框间距 */
  width: 100%; /* 可选，让表格撑满容器 */
}
table tr td:not(:first-child) {
  border-top: solid 1px #ccc;
}

方式二：使用nth-child(n+2)伪类

table {
  border-collapse: collapse;
  width: 100%;
}
table tr td:nth-child(n+2) {
  border-top: solid 1px #ccc;
}

代码说明 #

• border-collapse: collapse：这是必须的，它会让表格的单元格边框合并成一个整体，否则每个单元格的边框之间会有空隙，线条看起来不连续。
• td:not(:first-child)：选中每行里除第一个单元格之外的所有单元格，给它们添加上边框。
• td:nth-child(n+2)：同样能选中每行从第二个单元格开始的所有元素，和上面的效果一致，你可以根据自己的习惯选择。

这样修改后，就能实现你想要的“第一列无上行边框，其余列每行都有浅灰色上边框”的效果了。

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