html - 如何使用css向tr添加边框，其中包含th

Question

我已经构建了一个网页，其中包含一些带有侧标题的表格。这是我的标记:

<table id="talents">
    <thead>
        <!-- ... -->
    </thead>
    <tbody>
        <tr>
            <th scope="rowgroup" rowspan="3">Investigator</th>
            <td>At 3rd: Expanded Inspiration (Ex)</td>
            <td>Free insp. on Diplomacy, Heal, Perception, Profession, Sense Motive.</td>
        </tr>
        <!-- more trs falling into the above rowgroup -->
        <tr>
            <th scope="rowgroup" rowspan="4">Rogue</th>
            <td>At 2nd: Positioning Attack</td>
            <td>Once per day move up to 30ft. to spot adjacent to creature attacked.</td>
        </tr>
        <!-- more trs falling into the above rowgroup -->
    </tbody>
</table>

这是呈现的表格:

我想设置这些行组之间的边框样式，例如添加 border-top到包含 <th>Rogue</th> 的行。如果可能的话，我对纯 CSS 解决方案感兴趣，这是一种无需向带有 <th> 的行添加类或 id 的方法。在它们或其他东西中。

顺便说一句，对于实验性的 :has() 选择器来说，这似乎是微不足道的:

tbody tr:has(> th) { border-top: 2px solid black; }

但是there is still no browser support对于 :has() 。有支持的替代方案吗？

Answer 1

你可以使用这样的东西，

table {
  border-collapse: collapse;
}

tbody tr>th,
tbody tr>th~td {
  border-top: 2px solid black;
}

<table id="talents">
  <thead>
    <!-- ... -->
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" rowspan="2">Investigator</th>
      <td>At 3rd: Expanded Inspiration (Ex)</td>
      <td>Free insp. on Diplomacy, Heal, Perception, Profession, Sense Motive.</td>
    </tr>
    <tr>
      <td>At 3rd: Expanded Inspiration (Ex)</td>
      <td>Free insp. on Diplomacy, Heal, Perception, Profession, Sense Motive.</td>
    </tr>
    <!-- more trs falling into the above rowgroup -->
    <tr>
      <th scope="rowgroup" rowspan="4">Rogue</th>
      <td>At 2nd: Positioning Attack</td>
      <td>Once per day move up to 30ft. to spot adjacent to creature attacked.</td>
    </tr>
    <!-- more trs falling into the above rowgroup -->
  </tbody>
</table>