A rarely used CSS property that can be very useful given the right circumstances is the table-layout property. It has great rendering speed benefit when used properly. Obviously this will only apply to HTML <table>s, which I know none of you would EVER overuse. Tables are not totally evil, they have their proper implementations and their really, really bad ones. OK, on to the code:
/* Set table to 'fixed' (fastest render) layout */
.fixed_table {
table-layout: fixed;
}
/* Set table to 'auto' (best fit) layout. This is the default */
.auto_table {
table-layout: auto;
}Or alternatively in JavaScript:
$('elementID').style.tableLayout = 'fixed';When you want to use table-layout: fixed
How fixed table layout works is that the browser looks at the first row of the table and determines how to render the table based on the table width and the columns but NOT on the content of the columns. This allows large tables to be rendered faster but risks the table not displaying “optimally”. The best place to use table-layout: fixed is on larger tables (probably > 50 rows) and fairly uniform table cells (as in the cells should evenly divide the table). The benefit can be significant when the browser does not have to calculate the optimal width of each table cell.
When you want to keep the default style table-layout: auto
There is almost no benefit to setting a small table to table-layout: fixed. Furthermore, if the cell content varies greatly in length, your table may look really funky and different browsers may display your table in quite odd ways. Let me show you what I mean. Here is a quick example:
| Header 1 | Reallyreallyreallyreally looooong header | Header 3 |
|---|---|---|
| Reallyyyyyyyyyy Looooooong cell conteeeent | short | Normal cell content |
| short | ReallyyyyyyyyyyLooooooong cell conteeeent | Normal cell content |
| Header 1 | Reallyreallyreallyreally looooong header | Header 3 |
|---|---|---|
| Reallyyyyyyyyyy Looooooong cell conteeeent | short | Normal cell content |
| short | ReallyyyyyyyyyyLooooooong cell conteeeent | Normal cell content |
So don’t mess with table-layout: auto in these circumstances because it is just too unreliable. The harsh reality here with the automatic table layout is that the:
algorithm is sometimes slow since it needs to access all the content in the table before determining the final layout
This is why nesting or otherwise overusing <table>s is a bad idea.
For those interested, here is the official spec from the W3C. Have you ever used the table-layout CSS property? Was it useful and what was the result? Let’s hear it!