2

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

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

什么是干净的方法来做到这一点？我一直在尝试为每个外部表格行中的第一个、第二个和第三个单元格定义 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 不支持 nth-of-type 选择器。其次，在支持它的浏览器中，内部表格的第一个、第二个和第三个单元格从外部表格继承了填充属性，当我尝试覆盖它们时，内部表格的水平间距完全不正常。我不知道出了什么问题，更不用说为什么了。最好找到另一种方法，而不是继续尝试使这种方法起作用！

4

2 回答 2

2

为外部表格的单元格间距添加 cellpadding="0" 和任何您希望的值，并使内部表格宽度为 =“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/

于 2014-01-07T08:06:57.060 回答
0

我通过将“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"，等等。

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

我仍然对以更优雅的方式执行此操作的建议感兴趣 - 下次 - 但现在它正在工作，我无法投入大量时间。

于 2014-01-07T18:30:11.520 回答