CSS table-layout Property

Description

The table-layout property controls how the horizontal sizing of table columns is determined and therefore how the browser computes the final geometry of a table before painting. Its choice affects whether the browser must examine cell content across the whole table to decide column widths or can rely on already-declared sizes and the first row to establish a layout. That decision changes when and how much layout work the rendering engine performs, and it directly influences visual result — column widths, wrapping of text inside cells, and where scrollbars or overflow will appear.

One approach favors content-driven sizing: the engine inspects cell contents, intrinsic sizes, and spanning cells to compute column widths, which can produce columns that fit their contents naturally but may require multiple layout passes and can shift as content or fonts change. The other approach prefers a predictable, determinative method based on explicit table or column hints (including explicit width declarations or the sizes implied by the first row), so columns are established quickly and remain stable even if later cells contain larger content. Because of that, using this property affects how display-type table boxes are measured and laid out in the context of surrounding elements.

Beyond initial sizing behavior, this property interacts with other table-related mechanics: it changes how colspan and intrinsic cell sizes influence neighbors, how wrapped content and overflow are handled, and how border models participate in the final appearance (for example, when combined with border-collapse, the visual alignment of cell edges can look quite different). Practically, choosing the appropriate layout behavior is a trade-off between predictable, stable column widths and natural, content-fit sizing — and it can have a noticeable impact on performance for large tables or tables that are updated frequently, since one mode avoids expensive reflows while the other produces more content-driven fits.

Definition

Initial value: auto
Applies to: Table and inline-table elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.tableLayout

Interactive Demo

table-layout: auto;
width: 150px;

table-layout: fixed;
width: 150px;

table-layout: auto;
width: 100%;

table-layout: fixed;
width: 100%;

Apples	10 Dollars
Bunch of Bananas	5 Dollars
Oranges	2 Dollars
Grapes	3 Dollars

Syntax

table-layout: auto | fixed | inherit

Values

autoUse any automatic table layout algorithm.
fixedUse the fixed table layout algorithm.

Example

HTML

<div class="container">

    <h2>table-layout: auto vs fixed</h2>

    <div class="tables">

        <table class="auto">

            <caption>table-layout: auto</caption>

            <colgroup>

                <col style="width: 200px">

                <col>

                <col>

            </colgroup>

            <thead>

                <tr>

                    <th>Column A</th>

                    <th>Column B</th>

                    <th>Column C</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>Short</td>

                    <td>Very very long content that will expand the column width in auto layout.</td>

                    <td>Short</td>

                </tr>

                <tr>

                    <td>Another short</td>

                    <td>Medium content</td>

                    <td>More content</td>

                </tr>

            </tbody>

        </table>



        <table class="fixed">

            <caption>table-layout: fixed</caption>

            <colgroup>

                <col style="width: 200px">

                <col>

                <col>

            </colgroup>

            <thead>

                <tr>

                    <th>Column A</th>

                    <th>Column B</th>

                    <th>Column C</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>Short</td>

                    <td>Very very long content that will be clipped or wrapped according to fixed table layout.</td>

                    <td>Short</td>

                </tr>

                <tr>

                    <td>Another short</td>

                    <td>Medium content</td>

                    <td>More content</td>

                </tr>

            </tbody>

        </table>

    </div>

</div>

CSS

/* styles to demonstrate table-layout */
* {
    box-sizing: border-box;
}
.container {
    font-family: Arial, Helvetica, sans-serif;
    padding: 16px;
}
.tables {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
table {
    border-collapse: collapse;
    width: 400px;
    border: 1px solid #ccc;
}
caption {
    text-align: left;
    font-weight: 600;
    padding: 8px 0;
}
th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}
table.auto {
    table-layout: auto;
}
table.fixed {
    table-layout: fixed;
}
/* For the fixed table, constrain overflowing text */
table.fixed td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS table-layout property. Hover over a browser icon to see the version that first introduced support for this CSS property.