CSS | table-layout Property

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Supported Browsers: The browser supported by table-layout property are listed below:

  • Google Chrome 14.0
  • Internet Explorer 5.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 7.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.