How can I get my rowspan to "hover" correctly in the context of a Bootstrap table table hover...?

Bruce Gust
Bruce Gust used Ask the Experts™
on
Take a look at the image below:

screenshot
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?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
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?
Bruce GustPHP Developer

Author

Commented:
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?
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
Hi Bruce. Sorry I don't follow.

If you hover over those rows in the demo I posted, the rows are striped...
Bruce GustPHP Developer

Author

Commented:
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!
Bruce GustPHP Developer

Author

Commented:
<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>

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial