Fix table rendering problems in IE8

Those of you who do any serious web design know that using tables to define the layout of your page is so 1995. The only way to design your page is with css.

Those of you who actually really do any serious web site coding also know that you will sooner or later be asked to work on a site that makes heave use of tables, and when faced with re-coding the whole system to use css or sticking with tables, it’s often going to be stick with tables.

Unfortunatly, IE8 has a nasty habit of simply ignoring any table cell widths you specify and rendering them as whatever size it sees fit on a truly random basis (refresh the page and see a different layout!). Fortunatly I found a solution to get IE to behave nice again. You can use the?table-layout: fixed style to get it behaving well again, so just stick the following in your stylesheet (you do at least have one stylesheet don’t you?);

table{
  table-layout:fixed;
}

And there you have it – freedom to continue coding?like it’s Web 1.0 time!

9 Responses to “Fix table rendering problems in IE8”

  1. Rob says:

    Why do all so called designers seem to think that CSS = Styled div….You can get tableitus and divitus you know!!!!

    Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc. can be found on the ?learning CSS? page. For background information on style sheets, see the Web style sheets page. Discussions about CSS are carried out on the (archived) www-style@w3.org mailing list (and sometimes on the CSS blog) and on comp.infosystems.www.authoring.stylesheets.

    Does that mentions any specific tags!

  2. me says:

    Rob, the problem aren?t the tables, divs or css, the problem is ie, always, in all its versions.

  3. Bruce Stoner says:

    Internet Explorer 8 seems to be better than any previous version of IE. IE8 is very stable and rarely crashes or cause blue screens.
    ““““

  4. Markus Feilen says:

    Thanks for the article – I tried it and received a nice crunched website. I don’t know for what we have w3c.org, when nobody cares about it.

    But lets see it professional: more work to do for web developers.

  5. Drennen says:

    Our websites column widths are jacked up in IE8. I was excited to find this fix, but in our case, it did not help.

  6. BuiDucTrung says:

    ok. That is my problem and I have fixed it with: table-layout:fixed; Thank so much

  7. rexusdiablos says:

    Doesn’t work for me either. My CSS doesn’t render after my form is submitted to the same page. Does IE ever get it right?

  8. Martijn says:

    Thanks! I have been puzzling for hours why my table became bigger (or smaller) then specified in IE, while it worked fine in Firefox. This simple line of code saved my day!

  9. christine says:

    This fixed my column problem but screwed up the entire nav. I hate IE. Anyone have a suggestions please?

Leave a Reply