CODEWITHSUNDEEP
htmlcss
Nick
Nick

Reputation: 33

How to add border to tr with th in it with css

I've built a webpage with some tables that have side headers. Here is my markup:

<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>

And here's that table rendered: enter image description here

I would like to style the border between these rowgroups, say by adding a border-top to the row containing <th>Rogue</th>. I'm interested in a pure CSS solution if possible—a way to do this without adding classes or ids to the rows with a <th> in them or something.

Incidentally, it seems it would be trivial with the experimental :has() selector:

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

But there is still no browser support for :has(). Is there a supported alternative?

Upvotes: 2

Views: 57

Answers (1)

ezio4df
ezio4df

Reputation: 4105

You can use something like this,

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>

Upvotes: 2

Related Questions