table-layout - HTML CSS CSS Property

HTML CSS examples for CSS Property:table-layout

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. table-layout

Description

The table-layout CSS property layouts elements as the table cells, rows, and columns.

The following table summarizes the table-layout Property.

Item Value
Default value: auto
Applies to:The table and inline-table elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 

table-layout:      auto | fixed | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
auto Default value. The width of the table and its cells depends on the content of the cell.
fixed The horizontal layout of the table does not depend on the contents of the cells.
initial Sets this property to its default value.
inherit take the value of its parent element table-layout property.

The example below shows the table-layout property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS table-layout property</title>
  <style type="text/css">
    table {<!--from  w w  w .  j  a va  2 s.  c  o m-->
        width: 250px;
        border-collapse: separate;
    }
    table, tr, th, td{
        border: 1px solid #000000;
    }
    .auto {
        table-layout: auto;
    }
    .fixed {
        table-layout: fixed;
    }
    td{
        width: 50%;
    }
</style>
 </head>
 <body>
  <table class="auto">
   <caption>
    Example 1. Auto
   </caption>
   <tbody>
    <tr>
     <th>Name</th>
     <td>Tom</td>
    </tr>
    <tr>
     <th>Email</th>
     <td>e@mail.com</td>
    </tr>
   </tbody>
  </table>
  <br>
  <table class="fixed">
   <caption>
    Example 2. Fixed
   </caption>
   <tbody>
    <tr>
     <th>Name</th>
     <td>Mary</td>
    </tr>
    <tr>
     <th>Email</th>
     <td>a@mail.com</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Related Tutorials