CSS table-layout Property

Description

The table-layout property controls the algorithm used to lay out the table cells, rows, and columns.

Initial value

auto

Applies to

Table and inline-table elements

Inherited

No

Media

Visual

Computed value

As specified

Animatable

No

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.tableLayout

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

Desktop
5	12	14	1	7	1
Tablets / Mobile
1.5	18	4	10.1	3	1.0

Last updated by CSSPortal on: 2nd November 2019