Question

我有一个表，它位于一个充满正文和其他内容的父div中。我有以下似乎不起作用的CSS：

table {width:100%; padding: 0 50px 0 50px;}

当我使用边距而不是填充时，它可以工作 - 但是，宽度：100％，使用边距将整个事物从父div中移出。我想我可以减小宽度或指定精确的像素数量，但网站的其余部分随着屏幕尺寸而缩放，我也希望这样工作。

Answer 1

有一些与表相关的特殊属性。您正在寻找的是border-spacing。

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 50px;
}

示例：http://jsfiddle.net/feeela/fPuQ6/

更新：在玩弄我自己的小提琴后，我必须承认，通过告诉＆＃34;桌子没有填充物＃34;我错了。桌子上的填充物工作正常 - 至少在Chrome和Opera（12）中查看时。以下代码段应该也是您想要的：

table {
    width: 100%;
    padding: 0 50px 0 50px;
}

查看小提琴的更新版本：http://jsfiddle.net/feeela/fPuQ6/3/

尽管如此，我仍然想知道为什么填充不会像display: block;的元素那样添加到宽度中。

另见：

Answer 2

先前的答案显示css可以分别为ea方向设置border- [direction]。但是，复制旧式table cellpadding="7" border="1"的更简单的css解决方案可以如下。在CSS中：

table { 
  border-collapse:collapse;
  width: 100%;
}
td {
  padding: 7px;
  border:1px solid;
}

显示在这个小提琴中：http://jsfiddle.net/b5NW5/77

Answer 3

您可以在表定义中添加单元格填充，或者如果您想使用CSS，则可以尝试使用：

如果使用CSS：

<style type="text\css">
.table {
        width: 100%;        
        border-top:1px solid red;
        border-right:1px solid red;
        border-collapse:collapse;
    }
.table td {
    padding: 7px;
    border-bottom:1px solid red;
    border-left:1px solid red;
}
</style>

<table class="table">
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>

如果使用内联：

<table cellpadding="9" cellspacing="5" style="border-collapse:collapse;" border="1">
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>

你可以在这里看到这个： http://jsfiddle.net/b5NW5/1/

希望有所帮助

Answer 4

这就是原因；

从MDN开始，要在表中使用填充，您需要具有border-collapse: separate;，以便允许使用border-spacing，因为border-spacing是计算中的一个因素表的外部边缘与外部单元格的边缘之间的距离（请参见下面MDN的引号）。之后，您现在可以为padding分配一个值。您还可以将border-spacing: 0px;设置为取消向填充中添加border-spacing。

border-spacing CSS属性设置相邻单元格的边界之间的距离。仅当border-collapse分开时，此属性才适用。

border-spacing值也沿表的外部边缘使用，其中表的边界与第一/最后一列或行中的单元格之间的距离是相关（水平或垂直）边界的总和-间距以及相关的（顶部，右侧，底部或左侧）填充。

表填充不起作用

4 个答案: