table-layout

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

Syntax

CSS

table-layout: value;

JS

object.style.tableLayout = "value";

Values

<'table-layout'> = auto | fixed

auto

Automatically specified by the user agent.

fixed

The content of its table-cells is ignored for the purpose of width computation.

Initial

auto

<!doctype html>
<html>
<head>
    <style>
        table
        {
            border-style: solid;
            width: 100%;
        }
        td
        {
            border-style: solid;
        }
    </style>
    <script>
        function myfunction(myvar)
        {
            document.querySelector("table").style.tableLayout = myvar;
        }
    </script>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">auto</button>
    <button onmouseover="myfunction(innerHTML)">fixed</button>
    <table>
        <tr>
            <td>table-layout reallyreallyreallyreallyreallyreallyreallyreallylongword</td>
            <td>table-layout</td>
            <td>table-layout</td>
        </tr>
        <tr>
            <td>table-layout</td>
            <td>table-layout</td>
            <td>table-layout</td>
        </tr>
        <tr>
            <td>table-layout</td>
            <td>table-layout</td>
            <td>table-layout</td>
        </tr>
    </table>
</body>
</html>

Syntax

CSS

JS

Values

Initial

Examples

auto

fixed

JS

Links

Internal

External