display:table breaking set width/height

Question

Recently, I like using CSS-Table Layouts more and more.

When I had another issue with display:table, @vincicat pointed out that a table layout would have the ability to break the assigned css width/height.

I experimented a little and came across browser inconsistencies: http://jsfiddle.net/fabb/WywqB/

in Chrome

in Opera

Is it true that display:table can alter assigned CSS width or height? Are there any sources in the W3C specs stating that (I didn't find anything yet)?

Shouldn't the browsers behave the same? Which of the browsers is right?

Solution 1

http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html mentions that width and height calculations are done differently for tables, many times.

In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

Note. Values of this property [vertical-align] have different meanings in the context of tables. Please consult the section on table height algorithms for details.

[Width] Applies to: all elements but non-replaced inline elements, table rows, and row groups

and so on.

Solution 2

Width and height should be considered separately:

http://www.w3.org/TR/CSS2/tables.html#width-layout

Table width algorithms [...]

CSS does not define an "optimal" layout for tables since, in many cases, what is optimal is a matter of taste. CSS does define constraints that user agents must respect when laying out a table. User agents may use any algorithm they wish to do so, and are free to prefer rendering speed over precision, except when the "fixed layout algorithm" is selected.

and

Table height algorithms [...]

The height of a table is given by the 'height' property for the 'table' or 'inline-table' element. A value of 'auto' means that the height is the sum of the row heights plus any cell spacing or borders. Any other value is treated as a minimum height. CSS 2.1 does not define how extra space is distributed when the 'height' property causes the table to be taller than it otherwise would be.

So you can't control your tables' heights, but you can control their widths if you assign table-layout:fixed.

I'm pretty sure it works in all browsers (Keeping in mind that IE8 is not a browser...)