W3docs
en
Log in

CSS table-layout Property

Use the table-layout CSS property which is used to lay out table cells, rows and columns. Learn about property values and see examples.

The table-layout property specifies the algorithms which are used to lay out table cells, rows and columns.

The table-layout property specifies two algorithms to lay out tables: fixed and automatic.

When the "automatic" table layout is specified, the table’s width is set by the width of its columns.

When the "fixed" table layout is specified, the table's layout uses the table's width, any specified width of columns, and border and cellspacing values. The advantage of the table-layout property set to “fixed” is its performance. On large tables, the table will not be displayed until the whole table is rendered. This creates an impression that the page loads quicker.

Initial Valueauto
Applies toTable and inline-table elements.
InheritedNo.
AnimatableNo.
VersionCSS2
DOM Syntaxobject.style.tableLayout = "fixed";

Syntax

CSS table-layout syntax

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

Example of the table-layout property with the "fixed" value:

CSS table-layout code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 40%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 20%</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>Haage</td>
      </tr>
    </table>
  </body>
</html>
Try it Yourself »

Result

CSS table-layout values

Example of the table-layout property with the "auto" and "fixed" values:

CSS table-layout values example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th,
      td {
        border: 2px solid #666;
      }
      table.t1 {
        table-layout: fixed;
        width: 250px;
      }
      table.t2 {
        table-layout: auto;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h2>Table-layout property example</h2>
    <h3>Table-layout: fixed; width: 160px</h3>
    <table class="t1">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>Haage</td>
      </tr>
    </table>
    <h3>Table-layout: auto; width: 100%</h3>
    <table class="t2">
      <tr>
        <th>Country</th>
        <th>Capital</th>
        <th>City</th>
      </tr>
      <tr>
        <td>Russia</td>
        <td>Moscow</td>
        <td>Saint Petersburg</td>
      </tr>
      <tr>
        <td>England</td>
        <td>London</td>
        <td>Manchester</td>
      </tr>
      <tr>
        <td>The Netherlands</td>
        <td>Amsterdam</td>
        <td>Hague</td>
      </tr>
    </table>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
autoUses an automatic layout algorithm when the table and its cells fit the content. This is the default value of this property.Play it »
fixedUses fixed table layout algorithm. The widths of table, col and the first row of cells set the table and column widths.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

What does the CSS table-layout property do?