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 »



Like/Share Us on Facebook 😋