html - 表格的列和边框之间的间距相等

Question

我有一个包含三列的外表。每个单元格包含一个内部表。外表和内表都有边框。

我希望外部表格的左边框与第一个内部表格之间、每个内部表格与下一个内部表格之间以及最后一个内部表格与外部表格的右边框之间具有相等的水平空间。

有什么干净的方法可以做到这一点？我一直在尝试为每个外表行中的第一个、第二个和第三个单元格定义 CSS 规则，如下所示:

  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;
  }

这种方法会造成噩梦。首先，IE 8 不支持第 n 个类型选择器。其次，在支持它的浏览器中，内部表格的第一个、第二个和第三个单元格继承了外部表格的填充属性，当我尝试覆盖它们时，内部表格的水平间距会变大完全不正常。我不知道出了什么问题，更不知道为什么。最好找到另一种方法，而不是继续尝试使这种方法发挥作用!

Answer 1

添加 cellpadding="0"以及您希望外部表格单元格间距的任何值，并使内部表格 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%;
}

工作演示:http://jsfiddle.net/er144/qEcgw/