html - 如何使用css将边框添加到带有th的tr

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>