2

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!

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jonathan Sachs
  • 613
  • 8
  • 19
  • You could add classes and style them for starters. Should remove most of your problems. – NewInTheBusiness Jan 07 '14 at 03:14
  • Take a look at [Selectivzr](http://selectivizr.com/) – Mr. Alien Jan 07 '14 at 03:14
  • I'm not sure if I'm understanding correctly or not.. Can't you just put `border-spacing` on the main outer table? http://jsfiddle.net/GQsH8/ – Blake Mann Jan 07 '14 at 03:25
  • ERR144, unfortunately your answer only works if border-collapse=separate. There are other parts of the table that depend on border-collapse=collapse. – Jonathan Sachs Jan 07 '14 at 18:16
  • I just revisited this page and found that the site truncated my previous message. I'll retype the missing part. (1) Blake, my reply to ERR144 unfortunately applies to your suggestion as well. (2) Alien, this page will run in an environment that makes external JavaScript packages awkward to use. I appreciate your suggestion and I want to see how they did it, but now isn't the time. (3) NewInTheBusiness, I don't understand your suggestion at all. Of course I'm using styled classes; my original post includes the CSS rules that style them. Did you have something else in mind? Please clarify. – Jonathan Sachs Jan 08 '14 at 17:44

2 Answers2

2

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/

ER144
  • 690
  • 4
  • 10
0

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.

Jonathan Sachs
  • 613
  • 8
  • 19