CSS - table-layout


Advertisements


Description

The table-layout property determines the layout method used in rendering a table.

Possible Values

  • auto − The table should be laid out according to some automatic layout algorithm. Browser does this automatically.

  • fixed − The table should be laid out according to the provided fixed-table layout method.

Applies to

All the elements with a display of table or inline-table.

DOM Syntax

object.style.tableLayout = "fixed";

Example

NOTE − This property is not supported by many browsers so do not rely on this property.

Live Demo
<html>
   <head>
      <style type = "text/css">
         table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
      </style>
   </head>
   
   <body>
      <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>

   </body>
</html> 

This will produce following result −



Advertisements