What are the usage of “table-layout” property in CSS ?

Last Updated : 02 Jun, 2023

In this article, we are going to learn the usages of the table-layout property in CSS, The table-layout property in CSS specifies the layout of the table which consists of table cells, rows, and columns. It can have two values: “auto,” which allows the table to adjust its layout based on content, and “fixed,” which sets a fixed layout ignoring content and improves performance.

Syntax:

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

Property value: These are the properties and their usage for a table layout.

auto: The property value auto is used to create an automatic table layout on the browser. This property creates the column width by unbreakable content in the cells of the table.
fixed: The property value fixed is used to create a fixed table layout. The table and column widths are created by the widths of the table and column or by the width of the first row of cells.
initial: The property value is used to create its default value.
inherit: The property value to inherit the property from its parent.

Example 1: In this example, table-layout: the auto property is used in which an automatic table layout on the browser is created and this property creates the column width by unbreakable content in cells of the table.

HTML

<!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;
        }
 
        div {
            max-width: 200px;
            padding: 10px;
            border: 10px solid black;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>table-layout property</h2>
        <div>
            <h3>table-layout:auto</h3>
            <table id="table1">
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Books</th>
                </tr>
                <tr>
                    <td>Rita Shrivastava</td>
                    <td>30</td>
                    <td>Good Days</td>
                </tr>
                <tr>
                    <td>Priya </td>
                    <td>18</td>
                    <td>Bad Days</td>
                </tr>
            </table>
        </div>
        <br>
    </center>
</body>
</html>

Output:

Example 2: In this example, table-layout: the fixed property is used in which a fixed table layout is created and the table and column widths are created by the widths of table and column or by the width of the first row of cells.

HTML

<!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: fixed;
            width: 200px;
        }
 
        div {
            max-width: 200px;
            padding: 10px;
            border: 10px solid black;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>table-layout property</h2>
        <div>
            <h3>table-layout:fixed</h3>
            <table id="table1">
                <tr>
                    <th>Author Name</th>
                    <th>Age</th>
                    <th>Books</th>
                </tr>
                <tr>
                    <td>Rita Shrivastava</td>
                    <td>30</td>
                    <td>Good Days</td>
                </tr>
                <tr>
                    <td>Priya</td>
                    <td>18</td>
                    <td>Bad Days</td>
                </tr>
            </table>
        </div>
    </center>
</body>
</html>