CSS table-layout PropertyS2C Home « 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 longest 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 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.

table-layout

go to home page Homepage go to top of page Top