This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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