Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

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:

User generated image
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>

Open in new window


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?
Avatar of Rob
Rob
Flag of Australia image

There's certainly a few ways that come to mind.  Here is a demo: http://jsbin.com/dimolezuhi/edit?html,output which is just your code.

Are you saying you do not want the first column (rowspan="3") to be highlighted when hovering any where on the first row?
Avatar of Bruce Gust

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?
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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!
<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>

Open in new window


...and here's my tbody class:

      <style>
            tbody.hover:hover{ background-color: #ccc; }
            
            </style>