Highlight rows with rowspan

Question

I wish to highlight rows in html tables while using rowspans when hovering over a row. I'd prefer that to be implementable with CSS only with minimal or no javascript. Right now the Table row gets highlighted, but when having a 'sub' row it highlights only that instead of the row it's visually a 'part' of.

table {
  width: 100%;
}

.topLevelRow td {
  border-top:double 3px silver;
}

td {
  border-top:solid 1px silver;
}

tr:hover {
  background-color:lightgray;
}

<html>
  <head></head>
  <body>
    <table>
      <tr class="topLevelRow">
        <td rowspan="3">1</td>
        <td rowspan="3">Text 1</td>
        <td>Sub A 1</td>
        <td>Sub B 1</td>
      </tr>
      <tr><td>Sub A 2</td><td>Sub B 2</td></tr>
      <tr><td>Sub A 3</td><td>Sub B 3</td></tr>
      <!-- . -->
      <tr class="topLevelRow">
        <td rowspan="5">2</td>
        <td rowspan="5">Text 2</td>
        <td>Sub A 1</td>
        <td rowspan="1">Sub B 1</td>
      </tr>
      <tr><td rowspan="1">Sub A 2</td><td rowspan="1">Sub B 2</td></tr>
      <tr><td rowspan="1">Sub A 3</td><td rowspan="1">Sub B 3</td></tr>
      <tr><td rowspan="1">Sub A 4</td><td rowspan="1">Sub B 4</td></tr>
      <tr><td rowspan="1">Sub A 5</td><td rowspan="1">Sub B 5</td></tr>
      
    </table>
  </body>
</html>

As you can see it only highlights part of the rows. How can I highlight all of it?

Do you mean to highlight Text 1 + Sub A 1 - 3 together? – Michael W. Czechowski Mar 05 '19 at 15:23 — Michael W. Czechowski, Mar 05 '19 at 15:23
@MichaelCzechowski yes, exactly – FalcoGer Mar 05 '19 at 15:29 — FalcoGer, Mar 05 '19 at 15:29

Sebastian Brosch · Accepted Answer · 2019-03-05T15:41:40.337

You can use multiple <tbody> elements to define areas on your table. In this case you have one <table> element with some groups of rows. Using multiple <tbody> elements in <table> element is also valid HTML5.

table {
  width: 100%;
}

td {
  border-top: 1px solid silver;
}

tbody tr:nth-child(1) td {
  border-top: 3px double silver;
}

tbody:hover tr {
  background-color: lightgray;
}

<html>
  <head></head>
  <body>
    <table>
      <tbody>
        <tr>
          <td rowspan="3">1</td>
          <td rowspan="3">Text 1</td>
          <td>Sub A 1</td>
          <td>Sub B 1</td>
        </tr>
        <tr><td>Sub A 2</td><td>Sub B 2</td></tr>
        <tr><td>Sub A 3</td><td>Sub B 3</td></tr>
      </tbody>
      <tbody>
        <tr>
          <td rowspan="5">2</td>
          <td rowspan="5">Text 2</td>
          <td>Sub A 1</td>
          <td>Sub B 1</td>
        </tr>
        <tr><td>Sub A 2</td><td>Sub B 2</td></tr>
        <tr><td>Sub A 3</td><td>Sub B 3</td></tr>
        <tr><td>Sub A 4</td><td>Sub B 4</td></tr>
        <tr><td>Sub A 5</td><td>Sub B 5</td></tr>
      </tbody>
    </table>
  </body>
</html>

unfortunately that doesn't work easily in asp.Net with which I generate the table as asked here: https://stackoverflow.com/questions/5906977/can-i-insert-multiple-tbody-elements-into-an-asptable-programmatically — FalcoGer, Mar 05 '19 at 15:32
This answer is more semantic and accessible than the accepted answer. — Sean, Mar 05 '19 at 15:32

score 1 · Answer 2 · answered Mar 05 '19 at 15:27

The easiest way would be to break the table after each block. This is the simplest way, but it depends, if your template engine (or what ever you are using) allows this.

table {
  width: 100%;
}

table:hover {
  background-color:lightgray;
}

.topLevelRow td {
  border-top:double 3px silver;
}

td {
  border-top:solid 1px silver;
}

<html>
  <head></head>
  <body>
    <table>
      <tr class="topLevelRow">
        <td rowspan="3">1</td>
        <td rowspan="3">Text 1</td>
        <td>Sub A 1</td>
        <td>Sub B 1</td>
      </tr>
      <tr><td>Sub A 2</td><td>Sub B 2</td></tr>
      <tr><td>Sub A 3</td><td>Sub B 3</td></tr>
    </table>
    <!-- Break table here and start new one -->
    <table>
      <tr class="topLevelRow">
        <td rowspan="5">2</td>
        <td rowspan="5">Text 2</td>
        <td>Sub A 1</td>
        <td rowspan="1">Sub B 1</td>
      </tr>
      <tr><td rowspan="1">Sub A 2</td><td rowspan="1">Sub B 2</td></tr>
      <tr><td rowspan="1">Sub A 3</td><td rowspan="1">Sub B 3</td></tr>
      <tr><td rowspan="1">Sub A 4</td><td rowspan="1">Sub B 4</td></tr>
      <tr><td rowspan="1">Sub A 5</td><td rowspan="1">Sub B 5</td></tr>
    </table>
  </body>
</html>

this doesn't work well with tables that have cells with different widths. it gets all messy really fast. — FalcoGer, Mar 05 '19 at 15:42

Highlight rows with rowspan

2 Answers2