? CSS Table Layout

⚡ Quick Overview

The table-layout property controls how the browser calculates the width of a table and its columns. It is especially useful when you want consistent column widths and predictable table behavior across different screen sizes and amounts of content.

? Key Concepts

• table-layout defines the algorithm the browser uses to lay out table columns.
• It affects how quickly the table can be rendered and how responsive it feels.
• The two most common values are auto (default) and fixed.
• auto adjusts column widths based on the content in all rows.
• fixed uses the first row (or specified widths) to decide column widths, making layout more predictable.

? Syntax

/* Basic syntax for table-layout */
table {
  table-layout: auto; /* or fixed */
}

You apply table-layout to the <table> element. The value you choose impacts how the browser calculates widths and when it can start drawing the table.

? Values of table-layout

• auto (default) – The browser looks at the content of all cells to decide each column’s width. This can lead to uneven columns but fits content more tightly.
• fixed – Column widths are based on the first row and any explicit widths you set. Columns tend to have stable, consistent sizes, which is great for predictable layouts.

? Example 1 — table-layout: auto (Default)

With table-layout: auto;, the browser inspects the content of all cells to decide how wide each column should be.

/* Table using the default auto layout */
table.auto-layout {
  table-layout: auto;
  border-collapse: collapse;
}

table.auto-layout th,
table.auto-layout td {
  border: 1px solid #ccc;
  padding: 8px;
}

<!-- Table that relies on auto layout -->
<table class="auto-layout">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Mary Smith with a very long name</td>
      <td>34</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>James Brown</td>
      <td>40</td>
      <td>United Kingdom</td>
    </tr>
  </tbody>
</table>

The wider cell content causes some columns to stretch more than others.

? Example 2 — table-layout: fixed

With table-layout: fixed;, the browser uses the first row (and any set widths) to decide column sizes. This makes the layout more predictable, even when some cells contain long content.

/* Table with fixed layout for consistent columns */
table.fixed-layout {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

table.fixed-layout th,
table.fixed-layout td {
  border: 1px solid #ccc;
  padding: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<!-- Table using fixed layout for equal-width columns -->
<table class="fixed-layout">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Mary Smith with a very long name</td>
      <td>34</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>James Brown</td>
      <td>40</td>
      <td>United Kingdom</td>
    </tr>
  </tbody>
</table>

? Common Use Cases

• Pricing tables where each column should have the same width.
• Data-heavy tables where layout stability is more important than perfectly fitting text.
• Responsive admin dashboards where predictable column widths help avoid layout jumps.