table-layout

By Dan Gold

table-layout chooses the algorithm used to determine table column widths. Fixed layout requires an explicit table width; it is not a rule that automatically clips long text.

Compare content-based and fixed sizing

Both tables are 100% wide. In auto layout, the longer second column influences allocation. In fixed layout, no column widths are supplied, so the two columns share the remaining space.

HTML and CSS

HTML

<table class="auto">
  <caption>
    Automatic column sizing
  </caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Practice duration in minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td>30</td>
    </tr>
  </tbody>
</table>
<table class="fixed">
  <caption>
    Fixed column sizing
  </caption>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Practice duration in minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td>30</td>
    </tr>
  </tbody>
</table>

CSS

th,
td {
  border: 2px solid #2563eb;
  padding: 0.5rem;
  text-align: left;
}
caption {
  text-align: left;
  font-weight: bold;
}
table {
  margin-block: 1rem;
}
table {
  width: 100%;
}
.auto {
  table-layout: auto;
}
.fixed {
  table-layout: fixed;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Assign a narrow label column

The col element supplies 35% for the first column. Long tokens wrap in the second column so content remains available.

HTML and CSS

HTML

<table class="">
  <caption>
    Practice sessions
  </caption>
  <colgroup>
    <col />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Topic</th>
      <th scope="col">Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">CSS</th>
      <td>long-unbroken-practice-session-identifier</td>
    </tr>
  </tbody>
</table>

CSS

th,
td {
  border: 2px solid #2563eb;
  padding: 0.5rem;
  text-align: left;
}
caption {
  text-align: left;
  font-weight: bold;
}
table {
  margin-block: 1rem;
}
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
col:first-child {
  width: 35%;
}
td {
  overflow-wrap: anywhere;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Values and defaults

The initial value is auto and the property is not inherited. Automatic layout considers cell content. Fixed layout uses the specified table width, column widths, and borders or spacing. Explicit col widths take priority; otherwise widths on first-row cells can determine columns; remaining columns share the remaining space. Later-row content does not determine the fixed widths.

Common mistakes

With width:auto, fixed does not produce the fixed algorithm described here. Long content can overflow unless you choose wrapping or clipping separately. Ellipsis needs its own overflow/white-space conditions and can hide important data; prefer wrapping where possible. Fixed means a sizing algorithm, not a fixed pixel width: a 100% table can still resize with its container.

Learn overflow-wrap, text-overflow, and col.

Sources and browser support

MDN: table-layout describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.