Scholar Repository
Home>Manual>CSS Table-layout Property

CSS Table-layout Property

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

CSS table-layout Property


CSS Reference 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.


CSS Reference Complete CSS Reference

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

Home>Manual>CSS Table-layout Property