CSS table-layout Property

Description

The table-layout CSS property is used to control how a table's layout algorithm distributes space and sizes its columns and cells. It primarily has two values: "auto" and "fixed." When set to "auto," the table will adjust column widths based on content, potentially leading to varying column widths. Conversely, when set to "fixed," column widths are determined by the table's overall width and can be explicitly defined, ensuring consistent column sizes even if content varies. This property is valuable for optimizing the rendering of tables in web design, as it allows developers to choose between flexibility (auto) and predictability (fixed) in table layout.

Initial value

auto

Applies to

Table and inline-table elements

Inherited

No

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.tableLayout

Interactive Demo

table-layout: auto;
width: 150px;

table-layout: fixed;
width: 150px;

table-layout: auto;
width: 100%;

table-layout: fixed;
width: 100%;

Syntax

table-layout: auto | fixed | inherit

Values

• autoUse any automatic table layout algorithm.
• fixedUse the fixed table layout algorithm.

Example

<table class="test"> 

   <caption>table-layout: auto;</caption> 

   <tr> 

   <th>Name</th><th>Price</th> 

   </tr> 

   <tr> 

      <td>Apples</td><td>5 Dollars</td> 

   </tr> 

   <tr> 

      <td>Bananas</td><td>10 Dollars</td> 

   </tr> 

</table> 

<table class="test2"> 

   <caption>table-layout: fixed;</caption> 

   <tr> 

   <th>Name</th><th>Price</th> 

   </tr> 

   <tr> 

      <td>Apples</td><td>5 Dollars</td> 

   </tr> 

   <tr> 

      <td>Bananas</td><td>10 Dollars</td> 

   </tr> 

</table> 

table {
   width: 50%;
}
td, th {
   border: 1px solid; 
}
.test {
   table-layout: auto;
}
.test2 {
    table-layout: fixed;
}

Browser Support

The following table will show you the current browser support for the CSS table-layout property.

Desktop
12	14	1	7	1

Tablets / Mobile
18	4	10.1	3	1	1.5

Last updated by CSSPortal on: 2nd January 2024