How to layout table columns.
Syntax
table-layout: auto | fixed | inherit ;
auto - Automatic table layout algorithm, the column width is set by the widest unbreakable content in the cells. (default)
fixed - Horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells.
inherit - inherit from the parent element.
A fixed layout, in conjunction with setting a cell width will trigger the 'other table algorithm', browsers will then size based on the width, not the contents of the cells. Using a fixed layout, the entire table can be quickly rendered once the first table row has been downloaded.
Using an automatic layout, if some cell content is wider than that in the first row, then it will not fit in the calculated column width.
Examples:
td { table-layout: fixed; }
.emw3class { table-layout: auto; }
#emw3id { table-layout: fixed; }
Try it:
|
(CSS 2) Browser Support: All major browsers.
“Never mind the quality: feel the width” ~ 1950s catch phrase
Related:
overflow - What happens if content overflows an element's box.
width - Width of an element.