In HTML lots of people have used the TABLE element to layout their web pages (fortunately, I'm not one of them). Still, using tables for tabular data is great, it would be nice to create and style a table in XML. That is were CSS comes in: CSS2.1 tables. Some things that were possible with HTML aren't reproducible yet (the ROWSPAN and COLSPAN attributes) and it doesn't look like that is going to change (CSS3 will point to the CSS2 recommendation).
This is off course a small disadvantage, but not a huge one, since you won't need those much with your XML data if you format your (tabular) data correctly (I can be wrong here, since I have seen some good uses of the attributes). CSS offers also an advantage: you can omit quite a lot of display declarations if you are using XML. According to CSS tables, the browser should add those. This may look like a hack, but some data is stored in a way it is just not usable to have certain elements in it. 17.2.1 Anonymous table objects defines how this works.
The most annoying thing using display:table; (and display:table-cell;) for formatting tabular data or styling content is that the elements height stretches according to the content even if the height property is set! You can compare that to Internet Explorer's handling of the height attribute on normal elements, like a DIV. This is in my opinion one of the biggest errors of the whole specification (someone shoot (or e-mail) me if there was good reason), since height is not height here, it is min-height. Still there?
A user agent is allowed to ignore the height property when the content doesn't fit in the specified height using display:table; and must ignore it using display:table-cell;:
CSS2.1 does not specify rendering when the specified table height differs from the content height, in particular whether content height should override specified height; if it doesn't, how extra space should be distributed among rows that add up to less than the specified table height; or, if the content height exceeds the specified table height, whether the UA should provide a scrolling mechanism.
[...]
In CSS2.1, the height of a cell box is the maximum of the table cell's 'height' property and the minimum height required by the content (MIN).
It is of course annoying they did this, since you want:
body>div{
display:table-cell;
width:auto;
height:20em;
overflow:auto;
}
That doesn't work. The content grows to '20em', the content doesn't fit anymore in '20em' -> the height property is ignored. overflow has no effect. That is strange (not to use stupid), since if I wanted the DIV to be enlarged I would have used min-height.
A clever person at C!T Forums made up the following CSS3 solution:
td{
display:block;
height:100px;
}
td::outside{
display:table-cell;
}
Yes, that is a hack! Already needed to work around a 'error' (or strange thing) in the CSS2 specification that is not going to be upgraded to a CSS3 specification with more and better options (I think that are normal things you would expect from a CSS3 specification. Anyone with answers?
I've given it some more thought. Probably, the reason has to do something with the fact that the height of adjacent table cells is dependent on eachother. So, every table cell must have the same height as the table cell with the highest height value.
@Martijn:
(If) I follow your suggestion, I think it would be nice if overflow worked here, to give the designer some control over what to do with the overflow content.
- although a table full of little scrollbars would get a little ugly!