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
Explorer Edge Chrome Firefox Opera Safari
51214171
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
1.518410.13X

Last updated by CSSPortal on: 2nd November 2019