 Table rowspan help |
  |
| ShadesOfFall |
 Sep 5 2011, 07:47 PM
Post
#1
|
|
Group: Members Posts: 2 Joined: 5-September 11 Member No.: 15,336  |
There's something I want to do with a table but I can't quite figure it out.
Here's a basic table for demonstration purposes: CODE <html> <body> <table> <thead> <tr> <th>Item Header</th> <th>Link Header</th> </tr> </thead> <tbody> <tr> <td>Item 1</td> <td> <a href="#">Link 1</a> <br /> <a href="#">Link 2</a> </td> </tr> </tbody> </table> </body> </html> Ultimately what I want to do is put each link (Link 1 and Link 2) in their own rows then make the whole content area clickable with "display: block;" and then have the background change color with a:hover... but I want each of those links to still be connected to "Item 1" so that if a user clicks "Item Header" to sort the column alphabetically, both links will remain connected to the Item 1 "master row" (if you will). Here's a really quick example of what I mean (done hastily in Gimp 2.6):  (Note: The blue area is what would would happen once the link is highlighted with the mouse) I'm sure it's probably really simple and likely involves rowspan in someway, but I've tried a couple of things and just can't get it to do what I want. Any help would be appreciated. |
  |
 
|
| Brian Chandler |
Sep 6 2011, 09:54 AM
Post
#2
|
|
Jocular coder  Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Yes, to get the effect of the row with "ITem 1" on the left you need:
CODE <tr><td rowspan=2>Item 1</td><td>Link 1</td></tr> <tr><td>Link 2</td></tr> The second row simply omits its first column, since that will be filled by the "rowspanned" td above. HTML knows nothing about "sorting columns", so this just depends on how you write your server side program. |
|
|
|
| ShadesOfFall |
Sep 6 2011, 12:34 PM
Post
#3
|
|
Group: Members Posts: 2 Joined: 5-September 11 Member No.: 15,336 |
QUOTE(Brian Chandler @ Sep 6 2011, 10:54 AM)  Yes, to get the effect of the row with "ITem 1" on the left you need: CODE <tr><td rowspan=2>Item 1</td><td>Link 1</td></tr> <tr><td>Link 2</td></tr> The second row simply omits its first column, since that will be filled by the "rowspanned" td above. HTML knows nothing about "sorting columns", so this just depends on how you write your server side program. Thanks for the response, but it doesn't work, though I believe the reason has to do with the specific structure of my table (the actual table I'm dealing with is more complicated than the example I gave) and not your code, which seems fine and is exactly how I figured rowspan was supposed to be used. Thankfully I've figured something else out that works fine for my purposes. Also, I'm using "sortable_us.js" from http://yoast.com/articles/sortable-table/ to sort the tables, and it works great. I highly recommend it. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 16th April 2024 - 04:43 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC