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

You are here: Reference > JavaScript > client-side > style handling > properties > tableLayout

tableLayout style property

Browser support:

Specifies or returns 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.

Syntax:

object.tableLayout;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: table-layout

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the tableLayout property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeTableLayout (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var layoutValue = selectTag.options[whichSelected].text;

            var table = document.getElementById ("myTable");
            table.style.tableLayout = layoutValue;
        }
    </script>
</head>
<body>
    <table id="myTable" border="1px">
        <tr>
            <td>Apple</td>
            <td>Pear</td>
            <td>Peach</td>
        </tr>
    </table>

    Change table-layout value:
    <select onchange="ChangeTableLayout (this);" size="2">
        <option />fixed
        <option selected="selected" />auto
    </select>
</body>