表格的列和边框之间的间距相等答案

【问题标题】：Equal spacing between columns & borders of a table表格的列和边框之间的间距相等
【发布时间】：2014-01-24 15:23:33
【问题描述】：

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

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

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

【问题讨论】：

您可以为初学者添加类和样式。应该可以解决您的大部分问题。
看看Selectivzr
我不确定我的理解是否正确。你不能把border-spacing 放在外面的主桌子上吗？ jsfiddle.net/GQsH8
ERR144，不幸的是，您的答案只有在border-collapse=separate 时才有效。表格的其他部分依赖于border-collapse=collapse。
我刚刚重新访问了这个页面，发现该网站截断了我之前的消息。我将重新输入缺少的部分。 (1) Blake，很遗憾，我对 ERR144 的回复也适用于您的建议。 (2) Alien，这个页面会运行在一个让外部 JavaScript 包难以使用的环境中。我很欣赏你的建议，我想看看他们是怎么做到的，但现在不是时候。 (3) NewInTheBusiness，我完全不明白你的建议。当然，我正在使用样式类；我的原始帖子包括样式化它们的 CSS 规则。你有别的想法吗？请澄清。

标签： html css css-tables spacing cellspacing

【解决方案1】：

为外部表格的单元格间距添加 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/

【讨论】：

非常感谢。非常有帮助。

【解决方案2】：

我通过用单独的类替换左、中、右列以及顶部、中间和底部行中的单元格的“第 n 个类型”选择器解决了这个问题：

   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"，等等。

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

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

【讨论】：