HTML Tables (scope=row)

HTML & CSS
1

I’ve got a simple table that I am laying out and I’ve come to a stumbling block. I’ve got a bunch of tabular data that all falls under one <th scope=“row” rowspan=“3”> and I’m adding a simple visual cue with some css that highlights the row when the user is hovering over it. The problem is, since the th spans multiple rows, the hover is only working on the first row in the group. Have I set this up incorrectly? I want the TH to be highlighted regardless of what row the user is hovering in the group. Here’s a sample of the HTML:

<tbody>
		<tr>
			<th scope="row" rowspan="3">iPhone</th>
			<td>2G</td>
			<td>3.0</td>
			<td>Y</td>
			<td>N</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>3G</td>
			<td>3.0</td>
			<td>Y</td>
			<td>N</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>3GS</td>
			<td>3.0</td>
			<td>Y</td>
			<td>N</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
			<td>Y</td>
		</tr>
	</tbody>

Here’s the simple hover effect I am using:

table tbody tr:hover, table tbody tr:hover th {
	color: #000;
	background-color: #E5E5D8;
}

How do I trigger the TH regardless of the row in the group? Is it possible without JS?

2

i think you are missing <table></table> tags in your code.

that may help.

vineet

3

The first cell spans three rows, but it’s only a child of the first row.

You could try this,

tbody:hover td, tbody:hover th {
  background-color:#e5e5d8;
  color:#000;
}

And you should probably use <th scope="rowgroup"> since it seems to apply for the whole row group, not just the first row.

4

Just to clear that up - if you are using that approach, you need to close the <tbody> and start a new one between every block of grouped rows, ie

<table>
<tbody>
<tr><th rowspan=3></th> <td></td> <td></td> <td></td></tr>
<tr><td></td> <td></td> <td></td></tr>
<tr><td></td> <td></td> <td></td></tr></tbody>
<tbody>
<tr><th rowspan=2></th> <td></td> <td></td> <td></td></tr>
<tr><td></td> <td></td> <td></td></tr></tbody>
</table>
5

From the sample in the first post, I’d say RSBomber is aware of that.

6

Thanks everyone. As Stevie D pointed out… it was the tbody:hover th piece that I was missing. I have the table broken up into multiple tbody sections… so this approach works great.

Thanks again for your help.