html - Padding table with CSS doesn't work on IE

Question

This is not working on my IE:

<table style="padding:5px">...</table>

however it works on Opera.

Is there a workaround?

Answer 1

The earlier CSS specs (which IE6 follows -- and I use the word "follows" loosely) are not clear about what padding defined on a table should even mean. IE6, naturally, decided to interpret this differently than every other browser, by ignoring the padding. Other browsers decided to render it by adding spacing between the table border and the outermost cells, without affecting the spacing inside cells, or between internal cells. By the time IE7 came out, the specs had cleared up to work like the other browsers, but IE6 still has the problem, where it simply ignores the padding.

The best solution is to avoid putting padding on your table, but instead surrounding it with a div, and putting the padding there.

<div style="padding: 5px;">
    <table...>
    </table>
</div>

Of course, if what you want is cell spacing or cell padding (as opposed to just padding on the table), then you should use the cellspacing or cellpadding attributes (even if you don't want these, you at least need cellspacing="0" to avoid another separate issue with IE6 table rendering).

Also, the inline styles here are for demo purposes; using css classes is generally considered better practice.