CSS Property table-layout








The table-layout property controls the layout methods for a table.

Summary

ItemValue
Initial value auto
Inherited No.
Version CSS2
JavaScript syntax object.style.tableLayout="fixed"

CSS Syntax

table-layout: auto | fixed | inherit 




Property Values

The property values are listed in the following table.

Value Description
auto Default value. Set the column width by the widest unbreakable content
fixed Based on the table's width and the width of the columns, not the table contents
inherit Inherit the table-layout property from the parent element

Browser compatibility

table-layout Yes Yes Yes Yes Yes

Example

An example showing how to use table-layout CSS property.

<!DOCTYPE HTML>
<html>
    <head>
        <style>
        table {<!--  w ww  .j  ava  2  s.  c o m-->
            border: thin solid black;
            table-layout: auto;
        }
        th, tfoot td {
            border: thin solid black;
            text-align: center;
            font-weight: bold;
        }
        tbody td {
            font-size: 120%;
        }
        caption {
            font-size: 90%;
            text-align: right;
        }
        td, th, caption {
            padding: 5px;
        }        
        </style>
    </head>
    <body>
        <table>
            <caption>
                Table: My favorite records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> B</td>
                    <td> V</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> Q</td>
                    <td> Q</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> M</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

Click to view the demo