CSS table-layout Property

The table-layout property specifies the table layout algorithm.

This algorithm calculates the table, column, and cell widths.

This property informs the browser how to best render a table.

Example

#

Two tables with a table-layout set to auto. The first table has a limited width and text wraps inside the cells. The second table does not have such limit.

Full Name Position Gender
Alfred Futter Web Designer Male
Michelle Ranger Data Analyst Female
John Heights Graphic Artist Male

Full Name Position Gender
Alfred Futter Web Designer Male
Michelle Ranger Data Analyst Female
John Heights Graphic Artist Male
<style>
  .table-auto {
    border: 2px solid lightblue;
    border-collapse: collapse;
    table-layout: auto;
  }

  .table-auto th,
  .table-auto td {
    border: 2px solid lightblue;
    padding: 5px;
  }
</style>

<table class="table-auto" style="width: 250px">
  <tr>
    <th>Full Name</th>
    <th>Position</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td>Alfred Futter</td>
    <td>Web Designer</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Michelle Ranger</td>
    <td>Data Analyst</td>
    <td>Female</td>
  </tr>
  <tr>
    <td>John Heights</td>
    <td>Graphic Artist</td>
    <td>Male</td>
  </tr>
</table>

<br />

<table class="table-auto" style="width:100%;">
  <tr>
    <th>Full Name</th>
    <th>Position</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td>Alfred Futter</td>
    <td>Web Designer</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Michelle Ranger</td>
    <td>Data Analyst</td>
    <td>Female</td>
  </tr>
  <tr>
    <td>John Heights</td>
    <td>Graphic Artist</td>
    <td>Male</td>
  </tr>
</table>

Syntax

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

Values

#

Value Description
auto The default. Table and column widths are based on the content of the cells.
fixed Column width is based on the first row of cells, or by assigned column widths. This method speeds up rendering because there are no further width calculations after the first row.
initial Sets the value to its default value value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different table-layout values.

Full Name Position Gender
Alfred Futter Web Designer Male
Michelle Ranger Data Analyst Female
John Heights Graphic Artist Male
<style>
  .table-layout-example {
    border-collapse: collapse;
    border: 2px solid lightblue;
    table-layout: fixed;
  }

  .table-layout-example th,
  .table-layout-example td {
    border: 2px solid lightblue;
    padding: 5px;
  }
</style>

<table class="table-layout-example" 
       style="width: 300px">
  <tr>
    <th>Full Name</th>
    <th>Position</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td>Alfred Futter</td>
    <td>Web Designer</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Michelle Ranger</td>
    <td>Data Analyst</td>
    <td>Female</td>
  </tr>
  <tr>
    <td>John Heights</td>
    <td>Graphic Artist</td>
    <td>Male</td>
  </tr>
</table>

Browser support

This table shows when table-layout support started for each browser.

Chrome
14.0 Sep 2011
Firefox
1.0 Nov 2004
IE/Edge
5.0 Mar 1999
Opera
7.0 Jan 2003
Safari
1.0 Jun 2003

You may also like

Guides