In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > table-layout

table-layout property

Browser support:

Specifies the way to lay out table cells, rows, and columns.

There are two types of algorithms that can be used to lay out a table.

'fixed' layout:

Faster than auto layout, because all rows can begin to display once they have been received
The horizontal layout only depends on the width of the table and columns, and disregards the width of the contents of cells.

'auto' layout:

The width of a column is determined by the longest unbreakable cell content in that column.
Slower, because every cell's width must be known before the table can be fully displayed.

JavaScript page for this property: tableLayout. You can find other example(s) there.

Possible values:

One of the following values:

auto

Default. Use the standard automatic table layout algorithm.

fixed

Use the fixed table layout algorithm.

inherit

Takes the value of this property from the computed style of the parent element.

Default: auto.

Example HTML code 1:

This example illustrates the use of the table-layout property:

<head>
</head>
<body>
    <table style="table-layout: fixed; width:300px;" border="1px">
        <thead>
            <th>fixed</th>
            <th>table-layout</th>
        </thead>
        <tbody>
            <tr>
                <td class="example">table-layout</td>
                <td class="example">fixed</td>
            </tr>
        </tbody>
    </table>

    <br /><br />

    <table style="table-layout: auto; width:300px;" border="1px">
        <thead>
            <th>auto</th>
            <th>table-layout</th>
        </thead>
        <tbody>
            <tr>
                <td class="example">table-layout</td>
                <td class="example">auto</td>
            </tr>
        </tbody>
    </table>
</body>