CSS: table-layout property
This CSS tutorial explains how to use the CSS property called table-layout with syntax and examples.
Description
The CSS table-layout property defines the algorithm to use to layout cells, rows, and columns in an HTML table.
Syntax
The syntax for the table-layout CSS property is:
table-layout: value;
Parameters or Arguments
- value
The layout algorithm to use for table cells, rows, and columns. It can be one of the following:
Value Description fixed The table and cell widths are determined by either the widths of the <table> and <col> elements or by the width of the first row of cells in the table.
table { table-layout: fixed; }auto Automatic algorithm where browser determines the table layout to use based on the table content
table { table-layout: auto; }inherit Element will inherit the table-layout from its parent element
table { table-layout: inherit; }
Note
- If the table-layout property is set to fixed, the table width and cell width is determined by either:
- The width of the <table> and <col> elements, or
- The width of the cells in the first row of the table.
- If IE8 is not honoring the cell widths in your HTML table, try setting the table-layout property to fixed.
- You can use the overflow property, in combination with a table-layout value of fixed, to clip the overflow content if necessary.
Browser Compatibility
The CSS table-layout property has basic support with the following browsers:
- Chrome
- Firefox (Gecko)
- Internet Explorer 5+ (IE 5+)
- Opera 7+
- Safari (WebKit)
Example
We will discuss the table-layout property below, exploring examples of how to use this property in CSS.
Fixed
Let's look at an example where we set the table-layout property to fixed.
The CSS would look like this:
table { table-layout: fixed; }
In this CSS table-layout example, we have set the table-layout property to fixed. Setting the table-layout property to fixed will force IE8 to honor the cell widths in a table. Whereas newer versions of IE will honor the cell widths without setting the table-layout property to fixed.
Auto
Let's look at an example where we set the table-layout property to auto.
The CSS would look like this:
table { table-layout: auto; }
In this CSS table-layout example, we have set the table-layout property to auto. Now the browser will use an automatic algorithm to layout the cells, rows, and columns in the table based on the content within the table.
Advertisements