CSS table-layout Property

Definition and Usage

The table-layout property sets the algorithm used to size <table> columns. It applies to table and inline-table boxes (including elements with those display values).

The initial value is auto: columns grow to fit content. With fixed, widths come from the table’s width, <col> widths, or the first row — later cells do not rewrite column sizes. fixed needs an explicit table width; otherwise the browser keeps using auto layout.

CSS Syntax

Property Values

How to Use table-layout

Set the algorithm on the table, then give fixed layout a real width.

1. Start with a real <table> (or an element with display: table).
2. Choose table-layout: auto or fixed on that table.
3. For fixed, set an explicit width (for example 100% or 240px).
4. Optionally set column widths on <col> or the first row. Handle long text with overflow, white-space, and text-overflow.

Live Preview

Same table and width. Switch between auto and fixed and watch how the long cell affects columns.

CSS Examples

Each snippet focuses on table-layout. Borders and width exist only so the algorithm is visible. Use Try It Yourself for a live editor.

<style>
  table {
    table-layout: auto;
    width: 240px;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #cbd5e1;
    padding: 6px;
  }
</style>

<table>
  <tr><th>First</th><th>Last</th></tr>
  <tr><td>Ed</td><td>Wood</td></tr>
  <tr><td>William</td><td>Shakespeare</td></tr>
</table>

<style>
  table {
    table-layout: fixed;
    width: 240px;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #cbd5e1;
    padding: 6px;
  }
</style>

<table>
  <tr><th>First</th><th>Last</th></tr>
  <tr><td>Ed</td><td>Wood</td></tr>
  <tr><td>William</td><td>Shakespeare</td></tr>
</table>

<style>
  table {
    table-layout: fixed;
    width: 160px;
    border-collapse: collapse;
  }
  td {
    border: 1px solid #cbd5e1;
    padding: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

<table>
  <tr><td>Ed</td><td>Wood</td></tr>
  <tr><td>William</td><td>Shakespeare</td></tr>
</table>

Key Takeaways