table-layout
Quick Summary for table-layout
The table-layout CSS property sets the algorithm used to lay out <table> cells, rows, and columns.
Code Usage for table-layout
/* Keyword values */ table-layout: auto; table-layout: fixed;  /* Global values */ table-layout: inherit; table-layout: initial; table-layout: unset; 
More Details for table-layout

table-layout

The table-layout CSS property sets the algorithm used to lay out <table> cells, rows, and columns.

Syntax

/* Keyword values */ table-layout: auto; table-layout: fixed;  /* Global values */ table-layout: inherit; table-layout: initial; table-layout: unset; 

Values

auto

By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.

fixed

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided. Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.

Formal definition

Initial valueauto
Applies totable and inline-table elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

auto | fixed

Examples

Fixed-width tables with text-overflow

This example uses a fixed table layout, combined with the width property, to restrict the table's width. The text-overflow property is used to apply an ellipsis to words that are too long to fit. If the table layout were auto, the table would grow to accommodate its contents, despite the specified width.

HTML
<table>   <tr><td>Ed</td><td>Wood</td></tr>   <tr><td>Albert</td><td>Schweitzer</td></tr>   <tr><td>Jane</td><td>Fonda</td></tr>   <tr><td>William</td><td>Shakespeare</td></tr> </table> 
CSS
table {   table-layout: fixed;   width: 120px;   border: 1px solid red; }  td {   border: 1px solid blue;   overflow: hidden;   white-space: nowrap;   text-overflow: ellipsis; } 
Result

Specifications

Specification
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification # width-layout

See also

<table> Select your preferred language English (US)DeutschFrançais日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
A person who never made a mistake never tried anything new.
Albert Einstein
Random CSS Property

counter-reset

The counter-reset CSS property resets a CSS counter to a given value. This property will create a new counter or reversed counter with the given name on the specified element.
counter-reset css reference