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:

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?
Bruce GustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)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 DeveloperAuthor 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?
RobOwner (Aidellio)Commented:
Hi Bruce. Sorry I don't follow.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bruce GustPHP DeveloperAuthor 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 DeveloperAuthor 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>
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Bootstrap

From novice to tech pro — start learning today.