CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES
Advertisements

CSS table-layout Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The table-layout CSS property specifies the algorithm used to lay out the table cells, rows, and columns. The following table summarizes the usages context and the version history of this property.

Default value: auto
Applies to: The table and inline-table elements
Inherited: No
Animatable: No. See animatable properties.
Version: CSS 2, 3

Syntax

The syntax of the property is given with:

table-layout auto | fixed | initial | inherit

The example below shows the table-layout property in action.

table {
    width: 250px;
    table-layout: fixed;
}

Tip: The fixed table layout algorithm allows a browser to lay out the table faster than the automatic table layout algorithm. The browser can begin to display the table once the first row has been received.


Property Values

The following table describes the values of this property.

Value Description
auto An automatic table layout algorithm is used for table layout. The width of the table and its cells depends on the content of the cell. This is default value.
fixed

Fixed table layout algorithm is used for table layout.

  • The horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.
  • Table and column widths are set by the widths of table and col elements or by the width of the first row of cells.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element table-layout property.

Note: The automatic table layout algorithm can slow down the rendering of a table having the large number of rows or columns, since it requires the browser to have access to all the content in a table before determining the final layout.


Browser Compatibility

The table-layout property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 2+
  • Internet Explorer 5+
  • Apple Safari 1+
  • Opera 7+

Further Reading

See tutorial on: HTML Tables, CSS Tables.

Related properties: width.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties