No table padding on IE for PC

Posted on by

A small difference in the way IE and other browsers interpret table attributes:

Browsers other than IE will show padding if it is applied to the table tag.

table {
padding:6px;
}

IE does not recognize table padding, and will show contained elements as flush with the edges of the table.

For example:

This is the way Safari 2.0 renders the code below. Note the 6 pixel white padding area between the edge of the table and the edge of the tr.

This is the way IE 5 running on VPC renders the code. However IE 6 on PC is the same.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>test of table padding</title>
<style type="text/css">
<!--
body {
background-color: #CCCC99;
}
table { 
padding:6px;
background:#FFF;
}

tr.class1 {
background:#FFF;
}

tr.class2 {
background:#99CCCC;
}


-->
</style></head>

<body>
<table width="100%" height="356" border="0" cellpadding="0" cellspacing="0">
  <tr class="class2" >
    <td> </td>
  </tr>
  <tr class="class1">
    <td> </td>
  </tr bgcolor="#99CCCC">
  <tr class="class2">
    <td> </td>
  </tr>
  <tr class="class1">
    <td> </td>
  </tr>
  <tr class="class2">
    <td> </td>
  </tr>
  <tr class="class1">
    <td> </td>
  </tr>
  <tr class="class2">
    <td> </td>
  </tr>
  <tr class="class1">
    <td> </td>
  </tr>
  <tr class="class2">
    <td> </td>
  </tr>
  <tr class="class1">
    <td> </td>
  </tr>
</table>
</body>
</html>