Table Layout Property
Last updated: 2026-09-13
table-layout Table Layout Property
table-layout determines the algorithm used to compute table column widths. The default auto sizes columns based on content, so columns widen to fit large amounts of content. fixed sizes columns from the first row or from explicit widths, ignoring content, and renders faster — a good fit for large data tables.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
table-layout: auto | fixed;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | fixed | Keyword | Table layout algorithm |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| table-layout | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： table-layout: fixed with width: 100% and width set on the first-row th quickly produces equal or proportionally distributed columns.
❓ FAQ
QWhat is the difference between table-layout: auto and fixed?
Aauto (the default): the browser walks every cell and computes column widths from content, so wide content stretches columns and can even break the container, and first render is slower. fixed: column widths come from the first row or explicit widths and ignore content, rendering faster; overflowing content can be handled with overflow or text-overflow.
QWhen should I use table-layout: fixed?
AUse fixed for large datasets, for fixed column widths, or when you need text truncation with text-overflow: ellipsis. It lets the first row determine widths, renders faster, and long content cannot blow out the table. Responsive tables also commonly use fixed with percentage widths for evenly distributed columns.
QWhy do my width settings not apply with table-layout: fixed?
AIn fixed mode, widths come from the first table row (usually th); widths set on td in later rows are ignored. To control widths, set them on the first-row th or use <colgroup> with <col>. If the first row sets no widths, columns are divided equally by the table's total width. This is the biggest behavioral difference from auto.
QCan table-layout: fixed solve content overflowing the table?
AYes. In auto mode long content stretches columns and can break the container; in fixed mode widths come from the first row, and content that overflows wraps by default or spills. Combined with white-space: nowrap, overflow: hidden, and text-overflow: ellipsis, you get single-line truncation with an ellipsis — the standard combo for very long text and table overflow.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
border-collapse Property
Control how table borders collapse
CSS Tables Tutorial
Master table layout techniques
