Table-layout - CSS Property

Syntax diagram of table-layout.

Description of the table-layout property.

The property table-layout determines whether the widths of a table's columns are based on their content or on a preset calculation: the table width divided by the number of columns.

Values for table-layout.

• table-layout: auto;

  The browser determines the widths of the columns based on their content, except for columns whose width is explicitly specified. The latter can be set on a cell in any row or on the col tag.

  January	July
  February	August
  March	September
  April	October
  May	November
  June	December

  table-layout:auto
• table-layout: fixed;

  All the columns in the table have the same width except those whose width is specified. Attention! The width must be indicated on the cell in the first row of the table or on the col tag.

  This value only has an effect if the total width of the table is set to a value other than auto.

  January	July
  February	August
  March	September
  April	October
  May	November
  June	December

  table-layout:fixed
• table-layout: initial; (auto) table-layout: inherit; table-layout: revert; table-layout: revert-layer; table-layout: revert-rule; table-layout: unset;

  Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the table-layout property.

The example was deliberately chosen with very short content in the first column and much longer content in the second column.
On the other hand, the table's width has been fixed so that the differences in column widths aren't absorbed by resizing the table. Its height has also been fixed to avoid the page jumping around at each step of the animation.

Change the way column widths are calculated with Javascript.

In JavaScript, here's how to change the value of table-layout. JavaScript offers a syntax with the typical CSS notation, in kebab-case, and another syntax with the camel-case notation.

let el = document.getElementById('id'); el.style['table-layout'] = 'fixed'; // or let el = document.getElementById('id'); el.style.tableLayout = 'fixed';

Read the way column widths are calculated in JavaScript.

The property must have been applied directly to the element itself via its style attribute, not through a CSS selector.

let el = document.getElementById('id'); let value = el.style['table-layout']; // or let el = document.getElementById('id'); let value = el.style.tableLayout;

With Javascript, read the computed value of table-layout.

The computed value is the one that comes from evaluating the inheritance cascade. If not, the computed value is the initial value of the property {auto in the case of table-layout).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('table-layout');

With JQuery, read or change the value of table-layout.

JQuery is a Javascript library that often allows shorter syntax than Javascript itself.


// Read the value:
$('#id').prop('table-layout');
// Write the value:
$('#id').prop('table-layout', 'fixed');
$('#id').prop('{table-layout': 'fixed'});


With JQuery, read the computed value of table-layout.

let value = $('#id').css('table-layout');

Test it yourself.

The buttons below apply the entered value to the property table-layout and then display either the value as it was applied, or the computed value. This second option lets you see how the value of the property is stored (serialized). In the case of table-layout, this won't make a difference, except if you enter an incorrect value: in that case, the applied value is empty and the computed value is the initial value.

Simulator.

The simulator clearly shows the effect of the table-layout property: with the value auto, it's the content of the cells that determines their width (in each column, the largest content), while the value fixed sets all columns to the same width.

The table width was set to 350 pixels, but none of the column widths were defined. This is the case where the effect of the table-layout property is most noticeable.

Browsers compatibility with table-layout.

As you can see in the table below, the handling of the property table-layout is excellent.

1

table-layout
property

Estimated overall support.

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Samsung Internet

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the table-layout property.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

  Regarding table-layout Introduction of the table-layout property to optimize table layouts (CSS version 2.xx).
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Table Module Level 3

  This specification module defines a table-based layout system, optimized for the rendering of tabular data. In this layout model, each cell is assigned to an intersection between a set of consecutive rows and a set of consecutive columns, which are themselves generated from the structure of the table and sized according to their content.

  Regarding table-layout Property unchanged in level 3 of the "CSS Tables module".
  

  October 25, 2016

  Working Draft.

  

  

  

See also, about tables.

The specification "CSS Table Module" published by the W3C includes all the definitions specifically related to tables, but many other more general properties can also apply to tables: dimensions, margins, etc.

Properties: