如何用CSS选择器实现表格特定类单元格的行内边框？是否需JavaScript？

我想在表格里实现这样的效果：给带有特定类的单元格及其之后的所有单元格添加上边框，给这个类单元格之前的所有单元格添加底部边框，形成跨行的顶部和底部边框。已知<tr>元素作为容器，多数浏览器会忽略它的边框，而且这个类是通过JavaScript动态添加到单元格上的。想问下能不能只用CSS选择器实现，还是必须靠JavaScript来解决？

现有代码 #

CSS 代码 #

table {
  border-collapse: collapse;
  border: 1px solid red;
}

.a {
  border-left: 2px solid gray;
  border-top: 2px solid gray;
}

.a td:first-child {
  border-left: 2px solid gray;
}

.a tr:first-child td {
  border-top: 2px solid gray;
}

.a tr:not(:first-child) td {
  border-top: 2px solid gray;
}

.a td:last-child {
  border-right: 2px solid gray;
}

.a tr:last-child td {
  border-bottom: 2px solid gray;
}

HTML 代码 #

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td class="b">3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td class="a">3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td class="b">3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

期望效果 #

完全可以靠纯CSS实现这个效果，不用JavaScript插手。核心是利用通用兄弟选择器和:not()伪类选中目标单元格的前后元素，结合表格边框合并的特性就能搞定。

调整后的CSS代码如下：

table {
  border-collapse: collapse;
  border: 1px solid red;
}

/* 给类为a的单元格自身及之后的所有单元格添加上边框 */
td.a,
td.a ~ td {
  border-top: 2px solid gray;
}

/* 给类为a的单元格之前的所有单元格添加底部边框 */
td.a {
  border-left: 2px solid gray;
}
tr td:not(.a):not(.a ~ td) {
  border-bottom: 2px solid gray;
}

代码说明 #

• td.a ~ td：通用兄弟选择器，能选中所有在.a单元格之后的同级<td>元素，统一添加上边框。
• tr td:not(.a):not(.a ~ td)：用:not()排除掉.a本身和它后面的单元格，剩下的就是.a前面的单元格，给它们加底部边框。
• 保留了.a的左边框，和期望效果匹配。

不管.a类是写死在HTML里还是用JS动态加上的，CSS都能自动识别并应用样式，完全不用额外写JS处理边框逻辑。

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