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
The Altova MissionKit is a suite of intelligent XML tools, including:
XMLSpy® – industry-leading XML editor
- Support for all XML-based technologies
- Graphical editing views, powerful debuggers, code generation, & more
MapForce® – graphical data mapping tool
- Drag-and-drop data conversion with code generation
- Support for XML, DBs, EDI, Excel® 2007, text, Web services
StyleVision® – visual stylesheet designer
- Drag-and-drop stylesheet design for XML & databases
- Output to HTML, PDF, RTF, Word 2007, & more
And more…
Try before you buy with a free fully functional 30-day trial
Download today
 |
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM.
The XML Certificate is for developers who want to document their knowledge of XML, XML DOM and XSLT.
The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.
The PHP Certificate is for developers who want to document their knowledge of PHP and SQL (MySQL).
|
|
