Stylesheets - making one table appear like another, with only css

Author

making one table appear like another, with only css

yawnmoth

2007-04-07, 6:16 pm

I have two tables on the following page:

http://www.frostjedi.com/terra/scripts/demo/tables.html

I'm trying to make the top one look like the bottom in using only
CSS. In FireFox, what I have, so far, works just fine. In IE7,
however, what I have doesn't seem to do anything. Any ideas as to
what CSS I might need to use to make the top look like the bottom in
IE7?

Andy Dingley

2007-04-10, 6:16 am

On 7 Apr, 15:31, "yawnmoth" <terra1...@yahoo.com> wrote:
> I have two tables on the following page:
>
> http://www.frostjedi.com/terra/scripts/demo/tables.html
>
> I'm trying to make the top one look like the bottom in using only
> CSS.

You're trying to do a "pivot" operation (in SQL terms) and swap rows
for columns. This requires a change to the internal structure of the
document and either a re-ordering of the elements within the table, or
else (as you're trying to do) changing the rendering behaviour of <tr>
and <td> to work as columns with cells stacked vertically within them.
For some quite fundamental reasons to do with keeping the rendering
process simple, CSS just doesn't have a flow model that models that
"newspaper column" behaviour (XSL:FO does, if you wanted to make
PDFs).

You might do better, in the direction you're already trying, by
looking into the other values for display that are deliberately
related to <table> rendering, such as table-column and table-cell,
rather than simply floating blocks. I don't know - I haven't tried it,
but it's worth a look.

Bear in mind though that the display: table-* property values were
originally intended for XML use, not HTML, and so they're not widely
supported. In particular IE doesn't, and I think this is the cause of
what you've seen here.

Of course it would be possible to do whatevver you want with CSS by
using position: absolute; However that's a fragile solution and
doesn't support automatic re-sizing well. Best avoid it.

On the whole. I think you're using the wrong tools here to address the
wrong problem. Rather than trying to present one logical structure as
looking like another, you might be better to transform it _into_ that
other logical structure first, using XSLT. This is a pretty easy piece
of XSLT. I assume you have server-side automatic generation of the
document (and so could do this), otherwise you'd just have pivoted the
table manually already.