Home Plog table-layout: fixed

 
Mobile version of this page


 

table-layout: fixed

http://www.w3.org/TR/REC-CSS2/tables.html#width-layout

13^th of October 2005

I've learnt something interesting today worth thinking more about. The "table-layout" selector in CSS2. Long story short... if you specify it like this:

then the whole table will be shown slightly faster because the browser doesn't have to load the whole table into memory and then use the "automatic table layout algorithm" where it needs to find out what widths to use on the table based on the content inside. With the fixed algorithm the widths are either defined by:

• a width != auto on any of the columns
• a width != auto on any of the columns found in the first row
• the remainder width found from rendering the first row by also considering the tables margin to other side-elements such as the whole window

So the least lazy set up is to set table-layout:fixed and then define the width either in CSS or in the first row and the web browser will be able to show parts of the table whilst the page is still loading. The fact that the web browser can't show anything until fully computing was one of the reasons for using Web Standards to code layout. Web Standards for layout is still the best way forward, but tables are often useful too, such as the big tables on the issuetracker ListIssues so I better start looking at this more seriously. A caveat is that it's not easy to slow down an already fast setup (I only use broadband :) to see the effect with my bare eyes. I guess I have to roll up my sleeves and read the W3C specs and implement it correctly without having to trail-and-error it.

Comment