Setting the Table Layout

Different browsers use different methods to calculate how a particular table should be displayed, with two primary table-layout (Table 9.1) methods favored:

Table 9.1. Table-Layout Values
VALUE	COMPATIBILITY
fixed	IE5.5^[*], O5, S1.3, CSS2
auto	IE5.5^[*], O5, S1.3, CSS2
inherit	IE5.5^[*], O5, S1.3, CSS2

^[*] For Windows only

Fixed method bases its layout on the width of the table and the width of columns in the first row. This method is generally faster than automatic.
Automatic uses the table column width along with the amount of content in the table data cell to calculate the final table data cell width. This will generally render more slowly than the fixed method, but it also produces more accurate results.

In this example (Figure 9.1), the same table code has had the fixed and automatic table-layout properties applied to it with obvious visual differences. Notice that although the word "Duchess" is cramped in the fixed version, there is plenty of space in the auto version.

Figure 1. Notice the word "Duchess" in the top table, which uses the fixed table layout method, is more cramped than the bottom table, which uses auto. Fixed table layout sets the width of the column arbitrarily.

To set the table layout method:

table-layout:

Type the table-layout property name, followed by a colon (Code 9.1).

Code 9.1. The `table-layout` property lets you force the browser to use either the `fixed` or `auto` methods for rendering tables.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting the Table Layout</title> <style type="text/css" media="screen"> table {     width: 680px;     border: 2px solid red;     background-color: #fcc; } table.fixedWidth { table-layout: fixed; } table.autoWidth { table-layout: auto;} td {     width: 50px;     padding: 5px;     border: 1px solid red;     background-color: #fff; } th {      width: 50px;      padding: 5px; } </style> </head> <body> <table > <caption>Results from the Queens Croquet Tournament</caption> <tr><th></th><th>1</th><th>2</th><th>3</th> <th>4</th><th>5</th><th>6</th><th>7</th> <th>8< /th><th>Total</th> </tr><tr> <td>Alice</td> ... </tr><tr> <td>Queen</td> ... </tr><tr> <td>Jack</td> ... </tr><tr> <td>Duchess</td> ... </tr></table> <table > <caption>Results from the Queens Croquet Tournament</caption> <tr><th></th><th>1</th><th>2</th><th>3</th> <th>4</th><th>5</th><th>6</th><th>7</th> <th>8< /th><th>Total</th> </tr><tr> <td>Alice</td> ... </tr><tr> <td>Queen</td> ... </tr><tr> <td>Jack</td> ... </tr><tr> <td>Duchess</td> ... </tr></table> </body></html>

fixed;

Type either of the following to specify which method you want used for laying out your table:

fixed, which will use the first row to calculate the overall width of table data cells in that column of the table.
auto, which will allow the browser to calculate the widths of table data cells based on their content and the overall width of the table.

Tips

Internet Explorer 5 for the Mac has some strange bugs when rendering tables using CSS and padding. Backgrounds will not fill the padded area of a table cell and cells will overlap.
Internet Explorer for Windows will automatically ignore the border set in CSS for empty data cells, but will apply the background color.

Table 9.1. Table-Layout Values

Figure 1. Notice the word "Duchess" in the top table, which uses the fixed table layout method, is more cramped than the bottom table, which uses auto. Fixed table layout sets the width of the column arbitrarily.

Code 9.1. The table-layout property lets you force the browser to use either the fixed or auto methods for rendering tables.

Code 9.1. The `table-layout` property lets you force the browser to use either the `fixed` or `auto` methods for rendering tables.