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”以及您希望的外表的cellspacing所需的任何值，并使内表宽度=“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/

Answer 2

我通过将左侧，中间和右侧列以及顶部，中间和底部行的单元格替换为“nth-of-type”选择器来解决问题：

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

然后我使用了一对类来设置每个单元格的样式：左上角是class =“left top”，下一个是class =“center top”等。

我不认为这是最优雅的解决方案，但它确实有效。

我仍然对提供更优雅的方法的建议感兴趣 - 下次 - 但是我现在无法承担大量时间，因为它正在发挥作用。

柱与柱之间的间距相等桌子的边界

2 个答案: