Highlight rows with rowspan

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?

Solution

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>