IE Table Rendering and tableLayout Property

I began looking at table performance briefly today specifically in regards to Internet Explorer!!! Firefox renders unbelievably fast in comparison to IE7 – which really sucks if your stuck to develop in IE only. A coworker of mine mentioned the “tableLayout” CSS property to me. It supposedly provides much better performance when used in larged tables. In some of my cases I have over 300 columns that need to be shown (I know…thats a little ridiculous).

  2. table
  3. {
  4. table-layout:fixed;
  5. }

However, the main caveat being that you must provide a fixed cell width for your table. The theory behind it is that IE needs to render the entire table in order to calculate the overall widths and heights associated with it. Using the tableLayout property with specific widths allows the table to render in one row at a time, rather than all together.

I haven’t fully implemented it yet myself, but some people notice large performance increases….check out it on MSDN:

Leave a Reply