Table's layout and its width

Generally speaking a table is made of six layers that in the combination with the chosen styling, make a CSS table layout. These layers, appearing hierarchically, are: table, column groups, columns, row groups, rows and cells.

The layout and styling are not strictly defined, as they depend on the design ideas and browsers performance.

Table-layout property

There is only one property that may be used to override the browser's algorithm and that is the table-layout property.

The table-layout property contains following information:

value: auto, fixed or inherit;
initial: auto;
applies to: table and inline-table elements;
inherited: no;
percentages: N/A;
media: visual;
computed value: as specified.

The value fixed makes the table layout fixed, while the value auto lets the browser controls the algorithm of the table's layout.

The table layout with the fixed algorithm depends on the table's width, the width of the columns, borders and cell spacing while it ignores the content of the cells.

The table width may be specified with the width property. A value of auto, for the cases when display is set to table or inline-display, will use the automatic table algorithm; however if the table is set to a block-level table in a normal flow, browser may use the regular algorithm for normal flow layouts when the width property is set to auto.

In the fixed layout the column width is determined as follows:

A column element with the value other then auto will set the width to that given value.
A cell in the first row with the value other then auto sets the width for the whole column; if the cell spans more then one column, the width is divided over two columns.
Other remaining columns equally divide the remaining horizontal table space.

The table's width in the automatic algorithm basically depends on the width of the columns and their borders.

The algorithm is also heavily depending on the browsers and how they render content versus the layout or whether will they choose precision over speed, etc...

Dynamic table layout changes

To apply dynamic changes to the table's layout, the property visibility can be used. This property takes the value collapse for row, row group, column and column group elements. This value makes entire row or column to be removed from display while the space left gets available for other content. The content affected by the rows or columns collapsing ends up being clipped while the table's basic layout remains unchanged.

Example

Example with CSS table's layout:

<html>
<head>
<style type="text/css">
table {
    position:relative; top:50px;
    width:80%;
    margin-left:10%;
    border:1px solid #333;
    font-family:"Verdana", sans-serif; font-size:smaller;
}
caption {
    font-variant:small-caps;
}
td {
    width:5%;
}
td+td {
    width:95%;
}
table#a {
    table-layout:auto;
}
table#f {
    table-layout:fixed;
}
</style>
</head>

<body>
<table id="f">
<caption>fixed</caption>
<tr><th>header 1</th><th>header 2</th></tr>
<tr><td>cell #111111111111111111111111</td><td>cell #22222</td>
</tr>
</table>

<table id="a">
<caption>auto</caption>
<tr><th>header 1</th><th>header 2</th></tr>
<tr><td>cell #111111111111111111111111</td><td>cell #22222</td>
</tr>
</table>

</body>
</html>

›› go to examples ››

Table's layout and its width

Table-layout property

Dynamic table layout changes

Example

Example with CSS table's layout:

Comments

About

Contact

Get Connected