The table-layout property specifies the table layout algorithm.
This algorithm calculates the table, column, and cell widths.
This property informs the browser how to best render a table.
Two tables with a table-layout set to auto.
The first table has a limited width and text wraps inside the cells. The second table does not have such limit.
| Full Name | Position | Gender |
|---|---|---|
| Alfred Futter | Web Designer | Male |
| Michelle Ranger | Data Analyst | Female |
| John Heights | Graphic Artist | Male |
| Full Name | Position | Gender |
|---|---|---|
| Alfred Futter | Web Designer | Male |
| Michelle Ranger | Data Analyst | Female |
| John Heights | Graphic Artist | Male |
<style>
.table-auto {
border: 2px solid lightblue;
border-collapse: collapse;
table-layout: auto;
}
.table-auto th,
.table-auto td {
border: 2px solid lightblue;
padding: 5px;
}
</style>
<table class="table-auto" style="width: 250px">
<tr>
<th>Full Name</th>
<th>Position</th>
<th>Gender</th>
</tr>
<tr>
<td>Alfred Futter</td>
<td>Web Designer</td>
<td>Male</td>
</tr>
<tr>
<td>Michelle Ranger</td>
<td>Data Analyst</td>
<td>Female</td>
</tr>
<tr>
<td>John Heights</td>
<td>Graphic Artist</td>
<td>Male</td>
</tr>
</table>
<br />
<table class="table-auto" style="width:100%;">
<tr>
<th>Full Name</th>
<th>Position</th>
<th>Gender</th>
</tr>
<tr>
<td>Alfred Futter</td>
<td>Web Designer</td>
<td>Male</td>
</tr>
<tr>
<td>Michelle Ranger</td>
<td>Data Analyst</td>
<td>Female</td>
</tr>
<tr>
<td>John Heights</td>
<td>Graphic Artist</td>
<td>Male</td>
</tr>
</table>
table-layout: auto | fixed | initial | inherit;
| Value | Description |
|---|---|
| auto | The default. Table and column widths are based on the content of the cells. |
| fixed | Column width is based on the first row of cells, or by assigned column widths. This method speeds up rendering because there are no further width calculations after the first row. |
| initial | Sets the value to its default value value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different table-layout values.
| Full Name | Position | Gender |
|---|---|---|
| Alfred Futter | Web Designer | Male |
| Michelle Ranger | Data Analyst | Female |
| John Heights | Graphic Artist | Male |
<style>
.table-layout-example {
border-collapse: collapse;
border: 2px solid lightblue;
table-layout: fixed;
}
.table-layout-example th,
.table-layout-example td {
border: 2px solid lightblue;
padding: 5px;
}
</style>
<table class="table-layout-example"
style="width: 300px">
<tr>
<th>Full Name</th>
<th>Position</th>
<th>Gender</th>
</tr>
<tr>
<td>Alfred Futter</td>
<td>Web Designer</td>
<td>Male</td>
</tr>
<tr>
<td>Michelle Ranger</td>
<td>Data Analyst</td>
<td>Female</td>
</tr>
<tr>
<td>John Heights</td>
<td>Graphic Artist</td>
<td>Male</td>
</tr>
</table>
This table shows when table-layout support started for each browser.
 Chrome
|
14.0 | Sep 2011 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
5.0 | Mar 1999 |
 Opera
|
7.0 | Jan 2003 |
 Safari
|
1.0 | Jun 2003 |
