3

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/

Rendering in Chrome in Chrome

Rendering in Opera 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?

Community
  • 1
  • 1
fabb
  • 11,660
  • 13
  • 67
  • 111

2 Answers2

5

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.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • So `display:table` is affected by the same restrictions as ``?
     – fabb Jan 05 '12 at 09:16
  • Yes! The routine that does the drawing doesn't care if the elements are called "table" or "td", etc, only what the display type of the elements is. – Mr Lister Jan 05 '12 at 09:37
  • I updated my question with a comparison of Chrome and Opera, would you say that the W3 specs allow both interpretations? – fabb Jan 05 '12 at 09:44
  • That turns it into a different question. But to answer, I guess that using display:table and not having things inside with display:table-row and table-cell may be unspecified behaviour. Did you check what happens if you emulate a complete table? – Mr Lister Jan 05 '12 at 10:23
  • Sure, no difference: http://jsfiddle.net/fabb/QfDAW/ - according to the article, missing table elements are synthesized at interpretation time when using some `display:table*` property ("anonymous table elements"). – fabb Jan 05 '12 at 11:11
3

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...)

Community
  • 1
  • 1
user123444555621
  • 148,182
  • 27
  • 114
  • 126