表格填充无效

Question

表格填充无效

29

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

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

如果我使用margin而不是padding，它可以工作 - 但是，使用width：100％时，使用margin会将整个内容移出父div。我猜我可以减小宽度或指定精确像素量，但站点的其余部分会根据屏幕大小进行缩放，我也希望这样运作。

- Hank

您可以将表格的边距和宽度设置为百分比。 - Blazemonger

可能重复：https://dev59.com/8HI-5IYBdhLWcg3wpaB1 - feeela

4个回答

12

这就是为什么；

根据MDN，在表格中使用padding时，需要设置border-collapse: separate;以允许使用border-spacing，因为border-spacing是计算外边框与外部单元格之间距离的一个因素(参见MDN中的引述)。然后您可以分配padding值。您还可以设置border-spacing: 0px;来取消border-spacing对padding的影响。

border-spacing CSS属性设置相邻单元格边框之间的距离。当border-collapse设置为separate时才适用此属性。

在表格的外边缘也使用border-spacing值，其中第一/最后一列或行中表格边框与单元格之间的距离等于相关(horizontal或vertical) border-spacing和table上(top, right, bottom或left) padding的总和。

- Ozichukwu

6

之前的回答展示了css如何单独为每个方向设置边框。但是一种更简单的只用css解决方案来复制旧式table cellpadding="7" border="1"可以是以下内容。在CSS中：

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

在这个fiddle中展示了：http://jsfiddle.net/b5NW5/77。

- murspieg

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/ 希望对你有帮助。

- kheya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- feeela · Accepted Answer

表格有一些特殊属性，你要找的是 border-spacing。

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

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

更新：在玩弄自己的代码后，我必须承认我之前说“表格没有填充”是错误的。表格上的填充效果很好 - 至少在Chrome和Opera（12）中查看时如此。以下代码片段也应该满足您的需求：

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

查看更新版本的示例：http://jsfiddle.net/feeela/fPuQ6/3/

然而，我仍然想知道为什么填充(padding)没有像具有 display: block; 的元素一样添加到宽度中。

另请参阅：