CSS table-layout Property

The table-layout property in CSS is used to define the algorithm used for arranging table cells, rows, and columns. It controls how the browser calculates the width and layout of a table.

Common values are auto and fixed.
Helps improve table rendering speed and layout control.
Makes tables more responsive and visually organized.

Syntax:

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

Default Value: Its default value is auto.

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 the content of the table.
initial: It is used to set an element’s CSS property to its default value.
inherit: It is used to inherit a property to an element from its parent element property value.

Example: This illustrates the use of the table-layout property where the values are assigned as auto & fixed.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
  
<head>
    <title>table-layout property</title>
<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
</head>

<body>
    <center>
        <h1>GeeksforGeeks</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>GFG</td>
                </tr>
                <tr>
                    <td>Rakesh Singh</td>
                    <td>25</td>
                    <td>GEEKS</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>GFG</td>
                </tr>
                <tr>
                    <td>Rakesh Singh</td>
                    <td>25</td>
                    <td>GEEKS</td>
                </tr>
            </table>
        </div>
    </center>
</body>
  
</html>
<!--Driver Code Ends-->

CSS table-layout Property

Explore