CSS Table-layout Property

From http://www.w3schools.com (Copyright Refsnes Data)

# CSS table-layout Property

Complete CSS Reference

## Definition

The tableLayout property sets the algorithm used to display the table cells, rows, and columns

Fixed table layout:

- The fixed table layout allows the browser to lay out the table faster than the automatic table layout
- In a fixed table layout, the horizontal layout only depends on the table's width, the width of the columns, and not the content of the cells
- By using fixed table layout, the user agent can begin to display the table once the entire first row has been received

Automatic table layout:

- In an automatic table layout, the column width is set by the widest unbreakable content in the column cells
- This algorithm is sometimes slow since it needs to access all the content in the table before determining the final layout

## JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.tableLayout="fixed"

In our HTML DOM tutorial you can find more details about the tableLayout property.

In our HTML DOM tutorial you can also find a full Style Object Reference.

## Example

table { table-layout: fixed }

## Possible Values

Value | Description
--- | ---
automatic | Default. Column width is set by cell content
fixed | Column width is set by table width and the width of the columns

## Try-It-Yourself Demos

Set the layout of a table
This example demonstrates the fixed and the automatic table layout.

Complete CSS Reference

From http://www.w3schools.com (Copyright Refsnes Data)