CSS table-layout Property

CSS table-layout property specifies the algorithm to use to layout cells, rows, and columns in an HTML table.

Usages

The following table outline the usages and version history of this property.

Default value: auto
Applies to: Table element
Inherited: Yes
Version: CSS2
JavaScript Syntax: object.style.tableLayout = "fixed"

Syntax

Here is a syntax for the CSS table-layout property

table-layout: auto | fixed | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
auto Defaults. Browsers use an automatic table layout algorithm. Table widths and its cells are adjusted to fit the content
fixed Sets a fixed table layout algorithm
initial Sets default value of this property
inherit Inherits this property from its parent element

Examples

The example below shows to sets table-layout property.

.one {
  table-layout: auto;
  width: 100px;
}
.two {
  table-layout: fixed;
  width: 100px;
}
.three {
  table-layout: auto;
  width: 100%;
}
.four {
  table-layout: fixed;
  width: 100%;
}

Run it...   »

Browser Compatibility

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

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.