CSS/Properties/table-layout

From W3C Wiki
< CSS‎ | Properties
Revision as of 18:12, 16 June 2011 by Hiroki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

table-layout

The table-layout property controls the algorithm used to lay out the table cells, rows, and columns.

Description

Values auto | fixed | inherit
Initial value auto
Applies to 'table' and 'inline-table' elements
Inherited No


Values

  • auto
    Use any automatic table layout algorithm.


  • fixed
    Use the fixed table layout algorithm.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 table{
   border-width: 1px;
   border-style: solid;
   border-collapse: separate;
   width: 400px;
 }
 #au{
   table-layout: auto;
   margin-bottom: 20px;
 }
 #fx{
   table-layout: fixed;
 }
 tr, th, td{
   border-width:1px;
   border-style: solid;
 }
 th{
   width: 5%;
 }

[index.html]

<body>
  <table id="au">
    <caption>Example 1. Auto</caption>
    <tr>
      <th>Values</th>
      <td>top | bottom | inherit</td>
    </tr>
    <tr>
      <th>Initial value</th>
      <td>top</td>
    </tr>
  </table>
  <table id="fx">
    <caption>Example 2. Fixed</caption>
    <tr>
      <th>Values</th>
      <td>top | bottom | inherit</td>
    </tr>
    <tr>
      <th>Initial value</th>
      <td>top</td>
    </tr>
  </table>
</body>

Csslist2 table-layout.png

CSS Reference

The CSS specification defines the table-layout property in 17.5.2 Table width algorithms.