English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Reference Manual

CSS @rules

Complete List of CSS Properties

CSS table-layout attribute usage and example

table-The layout CSS attribute specifies the algorithm used to layout the cells, rows, and columns of the table.

The following table provides usage instructions and version history of this property, as well as its usage syntax in JavaScript scripts.

Default value:auto
Applies to:Table and inline table elements
Inheritance:None
Animated:No.Please see Animation properties.
Version:CSS 2,3
JavaScript syntax:object.style.tableLayout="fixed"

table-layout syntax usage

The syntax of this property is as follows:

table-layout: auto | fixed | initial | inherit

The following examples demonstrate how to use table-layout attribute.

  table {
   width: 250px;
   table-layout: fixed;
  }
Test and see‹/›

Tip:The fixed table layout algorithm allows the browser to layout the table faster than the automatic table layout algorithm. Once the first row is received, the browser can start displaying the table...

Attribute value

The following table describes the values of this property.

ValueDescription
autoThe automatic table layout algorithm is used for table layout. The width of the table and its cells depends on the content of the cells. This is the default value.
fixed

The fixed table layout algorithm is used for table layout.

  • The horizontal layout of the table does not depend on the content of the cells; it only depends on the width of the table, the width of the columns, and the spacing of the borders or cells.

  • The width of the table and columns is set by the width of the table and col elements or the width of the first row of the cell.

initialSet this property to its default value.
inheritIf specified, the associated elements adopt the table of the parent element table-layout property values.

Note:The automatic table layout algorithm may reduce the rendering speed of tables with a large number of rows or columns because it requires the browser to access all the content in the table before determining the final layout.

Browser compatibility

table-The compatibility of layout properties among browsers; the numbers in the table below represent the minimum version number of the browser that supports this property; all mainstream browsers support this property.

  • Firefox 1+

  • Google Chrome2+

  • Internet Explorer 5+

  • Apple Safari 1+

  • Opera 7+

Read more

Please refer to the tutorials related to the following content:HTML table,CSS table.

Related properties:width.