Copyright © tutorialspoint.com

# CSS - table-layout

## Description:

The table-layout property determines the layout method used in rendering a table.

## Possible Values:

- auto: The table should be laid out according to some automatic layout algorithm. Broswer does this automatically.
- fixed: The table should be laid out according to the provided fixed-table layout method.

## Applies to:

All the elements with a display of table or inline-table.

## DOM Syntax:

object.style.tableLayout="fixed";

## Example:

NOTE:This property is not supported by many browsers so do not rely on this property.

    <style type="text/css">
    table.auto
    {
    table-layout: auto
    }
    table.fixed
    {
    table-layout: fixed
    }
    </style>
    <table class="auto" border="1" width="100%">
    <tr>
    <td width="20%">1000000000000000000000000000</td>
    <td width="40%">10000000</td>
    <td width="40%">100</td>
    </tr>
    </table>
    <br />
    <table class="fixed" border="1" width="100%">
    <tr>
    <td width="20%">1000000000000000000000000000</td>
    <td width="40%">10000000</td>
    <td width="40%">100</td>
    </tr>
    </table>

This will produce following result:

1000000000000000000000000000 | 10000000 | 100

1000000000000000000000000000 | 10000000 | 100

To Become more comfortable - Do Online Practice

Copyright © tutorialspoint.com