SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast RSBomber's Avatar
    Join Date
    Oct 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Tables (scope=row)

    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:

    HTML Code:
    <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:

    HTML Code:
    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. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i think you are missing <table></table> tags in your code.

    that may help.

    vineet

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first cell spans three rows, but it's only a child of the first row.

    You could try this,
    Code CSS:
    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.
    Birnam wood is come to Dunsinane

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    The first cell spans three rows, but it's only a child of the first row.

    You could try this,
    Code CSS:
    tbody:hover td, tbody:hover th {
      background-color:#e5e5d8;
      color:#000;
    }
    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
    Code HTML4Strict:
    <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. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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
    From the sample in the first post, I'd say RSBomber is aware of that.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Enthusiast RSBomber's Avatar
    Join Date
    Oct 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •