468,237 Members | 2,018 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,237 developers. It's quick & easy.

making one table appear like another, with only css

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?

Apr 7 '07 #1
1 1462
On 7 Apr, 15:31, "yawnmoth" <terra1...@yahoo.comwrote:
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 <tdto 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 <tablerendering, 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.

Apr 10 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

36 posts views Thread by toedipper | last post: by
10 posts views Thread by Richard A. DeVenezia | last post: by
61 posts views Thread by Toby Austin | last post: by
47 posts views Thread by Neal | last post: by
6 posts views Thread by davegb | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.