CSS Table Layout Property

Posted By Bajarangi soft , Posted On 08-10-2020

The table-layout property in CSS is used to display the layout of table,The look of an HTML table can be greatly improved with CSS,The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.

The table-layout property in CSS is used to display the layout of table.
Syntax:

table-layout: auto|fixed|initial|inherit;

Property Value:

auto: It is used to set the automatic table layout on the browser. This property set the column width by unbreakable content in the cells.
fixed: It is used to set a fixed table layout. The table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths. If no widths are present on the first row, the column widths are divided equally across the table according to content of table.
initial: It is used to set its default value.
inherit: It is used to inherit the property from its parent.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>table-layout property</title>
    <style>
        table {
            border-collapse: collapse;
            border: 1px solid black;
        }
        th, td {
            border: 1px solid black;
        }
        table#table1 {
            table-layout: auto;
            width: 200px;
        }

        table#table2 {
            table-layout: fixed;
            width: 200px;
        }
        div {
            max-width:200px;
            padding:10px;
            border:1px solid black;
        }
        h1 {
            color:green;
        }
    </style>
</head>
<body>
<center>
    <h1>Bajarangi soft</h1>
    <h2>table-layout property</h2>
    <div>
        <h3>table-layout:auto;</h3>
        <table id = "table1">
            <tr>
                <th>Author Name</th>
                <th>Age</th>
                <th>College</th>
            </tr>
            <tr>
                <td>RaviPratap Singh</td>
                <td>24</td>
                <td>PES</td>
            </tr>
            <tr>
                <td>Rakesh Singh</td>
                <td>25</td>
                <td>PES</td>
            </tr>
        </table></div><br>
    <div>
        <h3>table-layout:fixed;</h3>
        <table id = "table2">
            <tr>
                <th>Author Name</th>
                <th>Age</th>
                <th>College</th>
            </tr>
            <tr>
                <td>RaviPratap Singh</td>
                <td>24</td>
                <td>PES</td>
            </tr>
            <tr>
                <td>Rakesh Singh</td>
                <td>25</td>
                <td>PES</td>
            </tr>
        </table>
    </div>
</center>
</body>
</html>