CSS table-layout Properties


The table-layout Allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.

This property can have one of the three values fixed, auto or inherit.

<html>
     <head>
        <style type="text/css">
        table.auto{
        table-layout:auto;
        }
        table.fixed{
        table-layout:fixed;
        }
        </style>
        </head>
        <body>
        <table border="1px" width="100%" class="auto">
         <tr>
           <td width="20%">123456789876543215712345678765432587346</td>
           <td width="80%">123456789876</td>
         </tr>
        </table>
        
        <table border="1px"  width="100%"  class="fixed">
         <tr>
           <td width="20%">123456789876543215712345678765432587346</td>
           <td width="80%">123456789876</td>
         </tr>
        </table>
     </body>
    </html>
Output
123456789876543215712345678765432587346 123456789876
 
123456789876543215712345678765432587346 123456789876

Share this article on