CSS tables performance

Tables can be a real bottleneck in the overall page loading because browsers parse and render them in a peculiar way. When a table has an automatic width (table-layout: auto), browsers must perform a different calculation on each row and cell to determine what is the actual width of the table itself. Since the overall width of a table is given by the sum of the widths of its cells, it's safe to say that with an automatic table layout browsers don't know in advance how to calculate these widths.

Instead, with a fixed table layout (table-layout: fixed) such calculations are much faster, because the fixed table layout algorithm has the obvious advantage of being clearly defined in the CSS specifications, while the automatic layout mostly relies on browser's internal algorithms.

In short, use this:

table {
  table-layout: fixed;
}

It's not necessary to specify a width for the table cells. The important thing here is that you're actually forcing the browser to use a fixed table algorithm.

Leave a Reply

Note: Only a member of this blog may post a comment.