CSS table-layout Property

In CSS, the table-layout property is used to display the table's layout. This property is used to specify the algorithm used to layout <table> cells, rows, and columns.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    table {
        border-collapse: collapse;
        border: 1px solid black;
    }
    th,td {
        border: 1px solid black;
    }
    .ex1 {
        table-layout: auto;
        width: 150px;
    }
    .ex2 {
        table-layout: fixed;
        width: 150px;
    }
    .ex3 {
        table-layout: auto;
        width: 100%;
    }
    .ex4{
        table-layout: fixed;
        width: 100%;
    }
</style>
</head>
<body>

<h2>table-layout: auto; width: 150px</h2>
<table class="ex1">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Victor</td>
        <td>Computer Science</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Harry</td>
        <td>Electrical</td>
    </tr>
</table>
<h2>table-layout: fixed; width: 150px</h2>
<table class="ex2">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Victor</td>
        <td>Computer Science</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Harry</td>
        <td>Electrical</td>
    </tr>
</table>

<h2>table-layout: auto; width: 100%</h2>
<table class="ex3">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Victor</td>
        <td>Computer Science</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Harry</td>
        <td>Electrical</td>
    </tr>
</table>

<h2>table-layout: fixed; width: 100%</h2>
<table class="ex4">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Department</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Victor</td>
        <td>Computer Science</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Harry</td>
        <td>Electrical</td>
    </tr>
</table>

</body>
</html>

Preview

Property Values

Value	Description
auto	Browsers employ an algorithm for automatic table layout. The width of the column is determined by the widest unbreakable content in the cells. The layout will be determined by the content.
fixed	This function specifies a fixed table layout algorithm. The widths of the table and columns are determined by the widths of the table and col, or by the width of the first row of cells. Column widths are unaffected by cells in other rows. If there are no widths on the first row, the column widths are distributed evenly across the table, regardless of the content inside the cells.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
table-layout	14.0	1.0	1.0	5.0	7.0

tab-size

text-align

CSS table-layout Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us