CSS表格单元格左边框与行跨度

Question

使用我想添加的 CSS内部的带有折叠边框的 HTML 表格上的垂直边框。我不希望单元格边框出现在表格的外部。从表面上看，这很容易：只需在每个单元格上添加一个左边框，除了一行中的第一个单元格。

th:not(:first-child), td:not(:first-child) {
  border-left-style: solid;
}

不幸的是，这没有考虑跨两行的列：

<table>
  <tbody>
    <tr>
      <td rowspan="2">foobar</td>
      <td>one</td>
    </tr>
    <tr>
      <td>two</td>
    </tr>
  </tbody>
</table>

在这种情况下，选择器与“两个”的单元格不匹配，因为它是行中的第一个 <td>，即使它被呈现为在第二由于上面的rowspan="2" 列。

当然，我不是第一个遇到这种情况的人。确保单元格获得内部垂直边框的最新最佳实践方法是什么，即使它参与包含rowspan 的列？

Answer 1

table {
  border-collapse: collapse;
}

th:not(:first-child),
td:not(:first-child) {
  border-left-style: solid;
}

th[rowspan]:not(:last-child),
td[rowspan]:not(:last-child) {
  border-right-style: solid;
}

<table>
  <tbody>
    <tr>
      <td rowspan="2">foobar</td>
      <td>one</td>
    </tr>
    <tr>
      <td>two</td>
    </tr>
  </tbody>
</table>