highlighting all rowspans within a table row using CSS only

Question

Is there a way of getting the CSS to highlight the entire row, including the cells within the rowspans, rather than just the first line?

As you can see from the example, only the first line of the row is highlighted but not the other cells, this obviously looks quite messy, and I would rather be able to clear it up using CSS only, but will use Javascript if there is no other way.

http://codepen.io/anon/pen/jErMee

HTML

<table class="tb" style="width: 100%;" border="1" cellpadding="10" cellspacing="10">
  <tbody>
    <tr>
      <td>Package</td>

      <td>Includes</td>

      <td>Number of recruits</td>

      <td>Cost per recruit + VAT</td>
    </tr>

    <tr>
      <td rowspan="4">Lorem ipsum dolor sit amet</td>

      <td rowspan="4">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£105</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£120</td>
    </tr>

    <tr>
      <td>6–9</td>

      <td>£135</td>
    </tr>

    <tr>
      <td>1–5</td>

      <td>£150</td>
    </tr>

    <tr>
      <td rowspan="4">Lorem ipsum dolor sit amet</td>

      <td rowspan="4">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£175</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£200</td>
    </tr>

    <tr>
      <td>6–9</td>

      <td>£225</td>
    </tr>

    <tr>
      <td>1–5</td>

      <td>£250</td>
    </tr>

    <tr>
      <td rowspan="2">Lorem ipsum dolor sit amet</td>

      <td rowspan="2">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£220 (40% payable upfront)</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£275 (40% payable upfront)</td>
    </tr>

    <tr>
      <td rowspan="2">Lorem ipsum dolor sit amet</td>

      <td rowspan="2">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td>20+</td>

      <td>£300 (40% payable upfront)</td>
    </tr>

    <tr>
      <td>10–19</td>

      <td>£375 (40% payable upfront)</td>
    </tr>

    <tr>
      <td>Lorem ipsum dolor sit amet</td>

      <td>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</td>

      <td><br /></td>

      <td><br /></td>
    </tr>
  </tbody>
</table>

CSS:

body {
  padding: 50px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
   padding: 20px;
  border: 1px solid black;
}


tr:hover td {
    background-color: blue;
}

Answer 1

There is a JSBin.

I omit your part code, just for easily display.

The key of the issue is about <tbody>. A table must have a <thead>,but can have many <tbody>. So, use these code:

tbody:hover .td {
    background-color: blue;
}