Equal spacing between columns & borders of a table

Question

I've got an outer table with three columns. Each cell contains an inner table. The outer table and the inner tables all have borders.

I want an equal amount of horizontal space between the outer table's left border and the first inner table, between each inner table and the next, and between the last inner table and the outer table's right border.

What's a clean way to do this? I've been trying to do by defining CSS rules for the first, second, and third cells in each outer table row, like this:

  table.outer tr td:nth-of-type(1) {
     text-align:center; vertical-align:top;
     padding-left:3mm; padding-right:1.5mm;
  }
  table.outer tr td:nth-of-type(2) {
     text-align:center; vertical-align:top;
     padding-left:1.5mm; padding-right:1.5mm;
  }
  table.outer tr td:nth-of-type(3) {
     text-align:center; vertical-align:top;
     padding-left:1.5mm; padding-right:3mm;
  }

This approach creates nightmares. First, IE 8 doesn't support the nth-of-type selector. Second, in browsers that do support it, the inner table's first, second, and third cells inherit the padding properties from the outer table, and when I try to override them, the inner tables' horizontal spacing goes completely out of whack. I can't figure out what's going wrong, much less why. Better to find another approach than continue trying to make this one work!

Answer 1

Add cellpadding="0" and any value you wish for the cellspacing of the outer table, and make the inner tables width="100%".

Html:

<table class="outer" cellspacing="10" cellpadding="0">
    <tr><td><table class="inner"><tr><td>bbb</td></tr></table></td>
        <td><table class="inner"><tr><td>bbb</td></tr></table></td>
        <td><table class="inner"><tr><td>bbb</td></tr></table></td>
    </tr>
    <tr><td><table class="inner"><tr><td>a</td></tr></table></td>
        <td><table class="inner"><tr><td>a</td></tr></table></td>
        <td><table class="inner"><tr><td>a</td></tr></table></td>
    </tr>
</table> 

Css:

.outer
{ 
    border: 1px solid black;
}
.inner
{ 
    border: 1px solid black;
    width: 100%;
}

Working demo: http://jsfiddle.net/er144/qEcgw/

Answer 2

I solved the problem by replacing the "nth-of-type" selectors with separate classes for the cells in the left, center, and right columns and for the top, middle, and bottom rows:

   table.outer tr td        { text-align:center; vertical-align:top; }
   table.outer tr td.top    { padding-top:2mm; padding-bottom:1mm; }
   table.outer tr td.middle { padding-top:1mm; padding-bottom:1mm; }
   table.outer tr td.bottom { padding-top:1mm; padding-bottom:2mm; }
   table.outer tr td.left   { padding-left:3mm; padding-right:2mm; }
   table.outer tr td.center { padding-left:2mm; padding-right:2mm; }
   table.outer tr td.right  { padding-left:2mm; padding-right:3mm; }

Then I used a pair of classes to style each cell: the upper left is class="left top", the next is class="center top", etc.

I don't think this is the most elegant solution, but it works.

I'm still interested in suggestions for more elegant ways to do this -- for next time -- but I can't afford to put a lot of time into it now that it's working.