How to pseudo split an HTML table row

Get Started
1

Not sure if this is the place to ask but I can’t find it any where else. Is it possible to split an HTML table row (giving it a pseudo 3D step down look) but maintain the entire row’s data integrity and roll over highlighting? Thanks.

Example here:
http://www.flickr.com/photos/dragontheory/5491914657/

2

Can you unlock that image? It wants me to log in to view it.

3

What are we looking at on that link above exactly?

It says this:

                               [B]You must be signed in to see this content.[/B]

                      [U][B]Sign In

[/B][/U] SafeSearch is a feature that allows you to control what turns up in your searches on Flickr, and it’s on for everyone by default. If you aren’t logged in, you can turn SafeSearch off if you wish, but only on a per-search basis, via Advanced Search. Find out more at our Filters FAQ page.

Or was it supposed to go somewhere else :slight_smile:

Edit:

Or what Ryan just said :slight_smile:

4

Set the Safety filter to “safe”. Should be accessible now. Thanks.

5

I will say No I don’t think so. I mean yeah you coulD set a column to hold a diagional image. But that table will create nasty accessibility problems.

6

Hi,

This is totally reliant on set heights to work but as proof of concept it seems to be working.

http://www.pmob.co.uk/temp/table-slanted.htm

The table should still make relative sense but just has a few empty cells.

7

Paul O’B,

Excellent! Thank you for your time and effort. I knew it was possible. It even works in IE7. I also was playing with how to “bend” the row with CSS positioning but so far hadn’t been able to do so. It is important to not break the row because it correlates with the database row all the way across.

Thanks again.

8

So the trick (because you can’t actually move the table cells themselves) is to:

  1. set the table as usual,
  2. place a DIV in each TD,
  3. turn off the table borders,
  4. turn on the DIV borders and
  5. move the DIVs.

Clever dude. Would like to have variable column hights though. Dang images!

Thanks again.

9

Yes that’s about it.:slight_smile:

You can’t move table cells so I put the content in a div and moved the div into the cell below instead. That’s why you need a set height and if it wasn’t for the slanted image you could use em height as well.

It’s only the borders on the slanted cell that need turning off but I think I added some borders to the div to fix an IE7 bug somewhere along the line.

I was surprised that it worked so well but a shame that a variable height couldn’t be used.