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.

Answer 2

Did you try using <table cellpadding="5"> ? IE has problems with some css styling. Also your syntax is wrong you forgot a semi-colon.

Answer 3

I'd venture to guess something else is wrong in your code.

Padding works fine in IE:

http://jsbin.com/ewuho4/

Answer 4

If you want to pad the cells then use cellpading attribure (cellpadding="X") if you want to padd a table, then that is awkward considering it's structure, I recommend that you put a margin if you want some space between it and the rest of stuff. Padding does not work on IE an even though I am not a fan of IE I do not blame it for that