title: Equal spacing between columns & borders of a table
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>  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;
    }
  </code></pre>
  
  <p>This approach creates nightmares. First, IE 8 doesn't support the nth-of-type selector. Second, in browsers that <em>do</em> 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!</p>