html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS table-layout property

Definition

The CSS table-layout property allows us to specify the table layout algorithm to use when laying out a table.

Applies To

All table and inline table elements.

Property Values

auto - Table row widths are automatically worked out from the longest unbreakable content for each cell. This of course means all rows of a table need to be read before table generation, so is the slower of the options available.

fixed - Table row widths are those specified for the table. Therefore each row of a table can be rendered as it is read, so is the faster of the options available.

inherit - Table layout attributes are inherited from the parent element.

Default Value

Default value is set to auto so row widths are automatically worked out from the lonngest unbreakable content for each cell.

Inheritance

The table-layout properties are NOT inherited from the parent element unless specified using the inherit property value.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS table-layout property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS table-layout Property</title>

<!-- Valid values for CSS table-layout Property are:
	
	auto, fixed and inherit.
	
--> 

<style type="text/css">

/* Style Tables */
table, td {
  border: 1px solid red;
}

/* Fixed Table Layout */
#table1 {
  table-layout: fixed;
  width: 60%;
}
</style>
</head>

<body>
<h1>The table-layout CSS property</h1>
<h2>With the default (auto) value</h2>
<table>
  <tr>
    <td>BananaBananaBananaBanana</td>
    <td>YellowYellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>
<h2>With the fixed value</h2>
<table id="table1">
  <tr>
    <td>BananaBananaBananaBanana</td>
    <td>YellowYellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>
</body>
</html>

How It Looks

The results of using the table-layout property with the values above will look something like the following:

We are using percentages for row columns, so resize screen to see row overspill.

notepad
CSS right    << Prev          Next >>   CSS text-align

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.