On 7 Apr, 15:31, "yawnmoth" <terra1...@yaho o.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.
