totn CSS

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.

Share on: