Padding does not work in iE?

Question

I would like to have space around the content, inside the border of the element.

http://www.w3schools.com/CSS/css_padding.asp

I have used cellpadding which is working pretty good in FF but not in IE. The version of IE that I am using is 7.0.5730.13

I have tried a simple table

<table style="padding:100px" border="1">
    <tr><td>123</td></tr>
    <tr><td>456</td></tr>
    <tr><td>678</td></tr>
    <tr><td>kuz</td></tr>
</table>

But the output does not have space at all.. If I am using padding tag at <td>. It is working good. As padding is not working in IE. I used an alternate method.

I have created two dummy rows; one on top, another on the bottom and dummy columns one on right another left and I styled them with padding. It is working. Please let me know if there is any better method to have space around the content.

Answer 1

IE does not support padding on a table. I'm guessing you want to do this to have a space between the edge of the table and the content.

You can however have the same result by putting the table in a div (this is cross-browser).

<div style="padding:100px; border: solid black 1px">
  <table border="1" style="border: solid transparent 0px; width:100%">
        <tr><td>123</td></tr>
        <tr><td>456</td></tr>
        <tr><td> 678</td></tr>
        <tr><td>kzuk</td></tr>
    </table>
</div>

The div will mimic the table's outer border.

Edit: This will only work if your table is at 100% width. You can however, restrict the width of the div, but then you'd have to know how wide you want it to be.

<div style="padding:100px; border: solid black 1px; width:300px">
  <table border="1" style="border: solid transparent 0px; width:100%">
        <tr><td>123</td></tr>
        <tr><td>456</td></tr>
        <tr><td> 678</td></tr>
        <tr><td>kzuk</td></tr>
    </table>
</div>

Answer 2

http://www.w3schools.com/CSS/css_table.asp
Table padding is only implemented via a cell (td)