table layout

Summary

The ‘table-layout’ property controls the algorithm used to lay out the table cells, rows, and columns.

Overview table

Initial value

auto

Applies to

Table and inline-table elements

Inherited

No

Media

visual

Computed value

As specified

Animatable

No

CSS Object Model Property

object.style.tableLayout

Syntax

• table-layout: auto
• table-layout: fixed
• table-layout: inherit

Values

auto

Default. Column width is set by the widest unbreakable content in the column cells. The width of the table and its cells depends on the content of the cells.

fixed

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. It does not depend on the content of the cells. Rendering is faster as the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths.

inherit

This features inherits table-layout property from the parent element.

Examples

This example shows table-layout ‘auto’ and 'fixed’. With 'auto’, the column stretches to encompass the largest unbreakable element. With 'fixed’, the column gets the defined width, even though the content might not fit.

<p><strong>table-layout: auto</strong></p>
<table border="1">
    <tr>
        <td class="first"><p>cell 1, Lorem ipsum</p></td>
        <td><p>cell 2</p></td>
    </tr>
    <tr>
        <td><p>cell 3, Suspendisse in elit lectus.</p></td>
        <td><p>cell 4</p></td>
    </tr>
</table>

<p><strong>table-layout: fixed</strong></p>
<table border="1" class="fixed">
    <tr>
        <td class="first"><p>cell 1, Lorem ipsum</p></td>
        <td><p>cell 2</p></td>
    </tr>
    <tr>
        <td><p>cell 3, Suspendisse in elit lectus.</p></td>
        <td><p>cell 4</p></td>
    </tr>
</table>

<p><strong>table-layout: fixed with overflow set to hidden</strong></p>
<table border="1" class="fixed2">
    <tr>
        <td class="first"><p>cell 1, Lorem ipsum</p></td>
        <td><p>cell 2</p></td>
    </tr>
    <tr>
        <td><p>cell 3, Suspendisse in elit lectus.</p></td>
        <td><p>cell 4</p></td>
    </tr>
</table>

View live example

Here’s the CSS for styling the table, above.

/**
 * Table-layout - Web Platform Docs Examples
 *
 * An example of table-layout 'auto' and 'fixed'
 * With 'auto', the column stretches to encompass the largest unbreakable element
 * With 'fixed', the column gets the defined width, even though the content might not fit
 *
 * @author  Vivienne van Velzen
 * @see     /docs/css/properties/table-layout
 */

table {
    border-color: #F00;
    width: 400px;
    table-layout: auto; /* default */
}
table.fixed,
table.fixed2 {
    table-layout: fixed;
}
td {
    border-color: #00F;
}
td.first {
    width: 50px;
}
table.fixed2 td {
    overflow: hidden;
}
p {
    margin: 15px 0 3px 0;
}
td p {
    margin: 3px;
}

View live example

Notes

• When using 'table-layout: fixed’, authors should not omit columns from the first row. If a subsequent row has more columns than the greater of the number determined by the table-column elements and the number determined by the first row, then additional columns may not be rendered.
• If 'table-layout: fixed’, any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content.

Related specifications

CSS2.1, 17.5.2 Table width algorithms: the ‘table-layout’ property

W3C Recommendation

Attributions

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]