Bruce Gust
asked on
How can I get my rowspan to "hover" correctly in the context of a Bootstrap table table hover...?
Take a look at the image below:
I've got a Bootstrap configuration that looks like this:
I need the sections that are marked "not striped" to be striped. In other words, the "rowspan" is compelling the Bootstrap "hover" dynamic to skip over those rows that are part of the rowspan, but I need them to be included so everything is being "hovered" over correctly.
How can I do that?
I've got a Bootstrap configuration that looks like this:
<tbody>
<tr>
<td rowspan="3">striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
</tr>
<tr>
<td colspan="7">not striped</td>
</tr>
<tr>
<td colspan="7">not striped</td>
</tr>
</tbody>
I need the sections that are marked "not striped" to be striped. In other words, the "rowspan" is compelling the Bootstrap "hover" dynamic to skip over those rows that are part of the rowspan, but I need them to be included so everything is being "hovered" over correctly.
How can I do that?
ASKER
Hey, Rob! No, I'm saying I DO want the whole row "striped." In other words, when I hover over the row, I want everything to be striped. Right now, the two nested rows (not striped) - I want those rows to be striped.
Make sense?
Make sense?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Rob! I was able to figure it out. I used "tbody" to group the rows, even those that were nested, and I got the desired effect.
Thanks for weighing in!
Thanks for weighing in!
ASKER
<table class="table">
<tbody class="hover">
<tr>
<td rowspan="3" style="vertical-align:middle;">striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
</tr>
<tr>
<td colspan="7">not striped</td>
</tr>
<tr>
<td colspan="7">not striped</td>
</tr>
</tbody>
<tbody class="hover">
<tr>
<td rowspan="3" style="vertical-align:middle;">striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
<td>striped</td>
</tr>
<tr>
<td colspan="7">not striped</td>
</tr>
<tr>
<td colspan="7">not striped</td>
</tr>
</tbody>
</table>
...and here's my tbody class:
<style>
tbody.hover:hover{ background-color: #ccc; }
</style>
Are you saying you do not want the first column (rowspan="3") to be highlighted when hovering any where on the first row?