CSS table-layout Property

What You’ll Learn

The table-layout property controls how a browser calculates column widths in HTML tables. It helps you choose between content-driven sizing and predictable, performance-friendly layouts.

Introduction

The table-layout property in CSS is used to control the layout algorithm used for a table. It can speed up the rendering of large tables by letting the browser determine column widths without scanning every cell’s content.

This property is especially useful when working with tables that have complex content or require consistent column widths.

Definition and Usage

Apply table-layout directly to a <table> element. With auto, the browser sizes columns based on content. With fixed, column widths come from the first row, <col> elements, or explicit width values on cells.

For predictable layouts, set table-layout: fixed and give the table a defined width.

📝 Syntax

The syntax for the table-layout property is straightforward. It is applied to table elements:

table {
  table-layout: value;
}

Basic Example

table {
  width: 100%;
  table-layout: fixed;
}

Syntax Rules

• Set the property on the <table> element, not individual cells.
• Use fixed with a table width for reliable column sizing.
• Define column widths on the first row, <col> elements, or cell width values.
• The property is not inherited by default, but inherit is a valid keyword.

Related Properties

• border-collapse — merges table borders
• width — sets overall table and column sizing
• word-break — handles long content in fixed cells

🎯 Default Value

The default value of the table-layout property is auto.

💎 Property Values

When to Use table-layout

table-layout helps you choose the right table rendering strategy:

• auto — Small tables where content should determine column width naturally.
• fixed — Dashboards, data grids, and admin panels that need stable column sizes.
• fixed + width — Large tables where faster initial rendering matters.
• fixed + ellipsis — Tables with long text that should truncate instead of stretching columns.

If columns look uneven with fixed, set explicit widths on the first row or use <colgroup> and <col> elements.

Examples Gallery

Compare auto and fixed layouts, set column widths, build a data table, and handle long cell content with fixed layout.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  .auto-layout { table-layout: auto; }
  .fixed-layout { table-layout: fixed; }
  .fixed-layout th, .fixed-layout td { width: 100px; }
</style>

<table class="auto-layout">...</table>
<table class="fixed-layout">...</table>

.dashboard-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.dashboard-table col.name { width: 30%; }
.dashboard-table col.status { width: 20%; }
.dashboard-table col.notes { width: 50%; }

.product-table {
  table-layout: auto;
  border-collapse: collapse;
}

.compact-table {
  width: 100%;
  table-layout: fixed;
}

.compact-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table-layout in the family

table-layout controls how columns are sized, but good table styling usually combines it with border-collapse for clean borders and a table width so fixed columns have a reference size.

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

💡 Best Practices