Select all rows in a table row using CSS only

Question

Is there a way to get CSS to highlight the entire row, including cells in row rows, and not just the first row?

As you can see from the example, only the first line of the line is highlighted, but not other cells, this obviously looks pretty dirty, and I would prefer to clear it only with CSS, 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 JSBin.

I omit the code for my part, just for the convenience of displaying.

The key to the question is <tbody> . The table must have <thead> , but can have many <tbody> . So use this code:

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

Answer 2

I am updating my answer based on my comment on Todd Mark's answer. As mentioned above, and AFAICT, this solution will only work if the table has two main rows, but no more. For more than two main lines, I see no other way to do this without JS. Indeed, I can provide two ways to do this:

Method 1 (HTML and jQuery):

You can add a separate css class to each main line in HTML manually, for example:

HTML:

 <table class="tb" style="width: 100%;" border="1" cellpadding="10" cellspacing="10"> <thead> <th>Package</th> <th>Includes</th> <th>Number of recruits</th> <th>Cost per recruit + VAT</th> </thead> <tbody> <tr class="row-1"> <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 class="row-1"> <td>10–19</td> <td>£120</td> </tr> <tr class="row-1"> <td>6–9</td> <td>£135</td> </tr> <tr class="row-1"> <td>1–5</td> <td>£150</td> </tr> <tr class="row-2"> <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 class="row-2"> <td>10–19</td> <td>£200</td> </tr> <tr class="row-2"> <td>6–9</td> <td>£225</td> </tr> <tr class="row-2"> <td>1–5</td> <td>£250</td> </tr> <tr class="row-3"> <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 class="row-3"> <td>10–19</td> <td>£275 (40% payable upfront)</td> </tr> <tr class="row-4"> <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 class="row-4"> <td>10–19</td> <td>£375 (40% payable upfront)</td> </tr> <tr class="row-5"> <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> 

and use the following jQuery code for the hover effect:

JQuery

 jQuery(function ($) { var tableRowClasses = function (sel) { sel = $(sel); $.each(sel, function (i, v) { // Bind hover event handler $(v).hover(function () { var ta = "." + $(v).attr("class"); $(".hover").removeClass("hover"); $(ta).addClass("hover"); }); }); }; $(document).ready(function () { tableRowClasses(".tb tr"); }); }); 

JSFiddle:

JSFiddle for reference.

Path 2 (jQuery only):

Or you can dynamically add css classes to each line using a pure jQuery approach:

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> 

JQuery

 jQuery(function ($) { var tableRowClasses = function (sel) { var num = 0; sel = $(sel); $.each(sel, function (i, v) { // Bind hover event handler $(v).hover(function () { var ta = "." + $(v).attr("class"); $(".hover").removeClass("hover"); $(ta).addClass("hover"); }); // Add row classes var hasClass = typeof $(v).attr("class") !== "undefined"; if (hasClass && $(v).attr("class").search(/row/) > -1) return true; else { var css = "row-" + num; $(v).addClass(css); if ($(v).find("td[rowspan]").length > 0) { var rowS = parseInt($($(v).find("td[rowspan]")[0]).attr("rowspan"), 10), start = $.inArray(v, sel); for (i = start; i < start + rowS; i++) { $(sel[i]).addClass(css); } } num++; } }); }; $(document).ready(function () { tableRowClasses(".tb tr"); }); }); 

JSFiddle:

JsFiddle for reference.

In both cases:

For each solution, you will need the following css code:

CSS

 .hover { background-color: blue; }