Search code examples
htmlcsshtml-tableinternet-explorer-8internet-explorer-7

IE 7/8 bug with fixed layout TABLE and TD width as percentage


http://jsfiddle.net/michelpm/jywqh/

The table has 1000 pixels of width, so the table columns with 3.9%, 2.9%, 1.9%, 0.9% and 0.4% should measure exactly 39, 29, 19, 9 and 4 pixels. This is how I think it should behave and how it in fact behaves for any modern browser, but I should make it work for IE 7 and IE 8 as well.

In IE 7 those cells measure 30 (3.0%), 20 (2.0%), 10 (1.0%), 0 (0.0%), 0 (0.0%) and 940 (94%) pixels. In IE 8 those cells measure 30 (3.0%), 20 (2.0%), 10 (1.0%), 313 (31.3%), 313 (31.3%) and 313 (31.3%) pixels. In IE 9 and other browsers those cells measure 39 (3.9%), 29 (2.9%), 19 (1.9%), 9 (0.9%), 4 (0.4%) and 900 (90.0%) pixels.

If it is possible, which is the easiest (with less rewriting) or best (less ugly) way to make it work in both those ancient IEs and modern browsers?


Solution

  • Quote OP: "...which is the easiest (with less rewriting) or best (less ugly) way to make it work in both those ancient IEs and modern browsers?"

    There is nothing tricky about the <table> element; it's just as ancient as the ancient IE's. If the table is exactly 1000 pixels wide, why are you using percentages for the columns? Just specify each column in pixels making sure the total of all columns adds up to 1000... there should then be no cross-browser conversion issues. This is both the easiest and best way.

    EDIT:

    The OP explicitly stated, "The table has 1000 pixels of width", however, based on recent comments, is now stating, "I cannot assume 1000px". I don't see how this changes anything. My answer works for any width.

    IE cannot handle fractional percentages and seems to simply ignore anything after the decimal point. The simplest solution is to stick with whole number percentages or switch to pixels.