0
<table class="table table-hover" border="1">
 <tbody>
 <tr>
   <td rowspan="2">potato</td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td rowspan="2">banana</td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td rowspan="2">apple</td>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
 </tr>
 </tbody>
</table>

When I use the table-hover class on a table using rowspan it doesn't color the full row when pointing to the second row in the category (at least in my specific example).

I want it to function this way:

  • When hovering on an even row: it should change the bg color of the category of it too.
  • When hovering on a category: it should change the bg color of both rows linked to the category.

Is there a way to overcome this situation?

Preferable only using CSS

Here is a jsfiddle for my code: https://jsfiddle.net/3t76xq66/1/

Imnotapotato
  • 5,308
  • 13
  • 80
  • 147
  • This isn’t really Bootstrap’s “fault” though ... There is no real connection between the cells and the rows that CSS could use to select the right elements here to begin with. If you need this to work, then you should rather create your own custom solution IMHO. – CBroe May 02 '18 at 11:35
  • @CBroe lol, yes i know it's not bootstrap fault. i have been going through all sorts of posts like https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector and https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered and didn't manage to get my problem solved. – Imnotapotato May 02 '18 at 11:37
  • 1
    I don’t think there is a pure CSS way to solve this. While you could maybe manage to get the cells in the second TR to change when a cell in the first one is hovered, it won’t work the other way around (because CSS can not select “upwards” in the DOM) - I think you will need to use JavaScript here. (Or a different structure - like wrapping each of those constructs in a tbody of their own ... if that makes sense with the actual data structure you have there.) – CBroe May 02 '18 at 11:42

0 Answers0