CSS table-layout

The CSS table-layout property is used to define the width layout of table cells. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      table{border: 1px solid red; border-collapse: collapse;}
      th, td{border: 1px solid red;}
      
      table.a{table-layout: fixed; width: 90px;}
      table.b{table-layout: auto; width: 90px;}
      table.c{table-layout: fixed; width: 100%;}
      table.d{table-layout: auto; width: 100%;}
   </style>
</head>
<body>

   <h2>table-layout: fixed; width: 90px</h2>
   <table class="a">
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Louis Szekely</td>
         <td>Quebec City</td>
      </tr>
      <tr>
         <td>Margaret Mary Emily Anne Hyra</td>
         <td>Toronto</td>
      </tr>
   </table>
   
   <h2>table-layout: auto; width: 90px</h2>
   <table class="b">
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Natalia Nikolaevna Zakharenko</td>
         <td>Vancouver</td>
      </tr>
      <tr>
         <td>Allen Konigsberg</td>
         <td>Saskatoon</td>
      </tr>
   </table>

   <h2>table-layout: fixed; width: 100%</h2>
   <table class="c">
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Joaquin Rafael Bottom</td>
         <td>Halifax</td>
      </tr>
      <tr>
         <td>Gary Edward Keillor</td>
         <td>Liverpool</td>
      </tr>
   </table>

   <h2>table-layout: auto; width: 100%</h2>
   <table class="d">
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
      <tr>
         <td>Cornelius Crane Chase</td>
         <td>Edinburgh</td>
      </tr>
      <tr>
         <td>Amanda Lee Rogers</td>
         <td>Manchester</td>
      </tr>
   </table>
   
</body>
</html>

Output

table-layout: fixed; width: 90px

Name	City
Louis Szekely	Quebec City
Margaret Mary Emily Anne Hyra	Toronto

table-layout: auto; width: 90px

Name	City
Natalia Nikolaevna Zakharenko	Vancouver
Allen Konigsberg	Saskatoon

table-layout: fixed; width: 100%

Name	City
Joaquin Rafael Bottom	Halifax
Gary Edward Keillor	Liverpool

table-layout: auto; width: 100%

Name	City
Cornelius Crane Chase	Edinburgh
Amanda Lee Rogers	Manchester

CSS table-layout Syntax

The syntax of table-layout property in CSS, is:

table-layout: x;

The value of x should be any of the following:

fixed - Used to set the table and column widths based on the widths of table and col elements or on the width of first row
auto - Used to set the column width based on the widest unbreakable content available in the specified table cells
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

Note - The fixed layout renders the entire table when the first row gets downloaded and analyzed. Therefore, we can also say that the fixed layout can be used to speed up the table rendering time.

Note - But the demerit of fixed layout is, some cell content might not fit in the defined width. To overcome little bit with this problem, we can use the overflow property based on the requirement.

CSS Online Test

« Previous Tutorial Next Tutorial »