表填充不起作用

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/

更新:在玩弄我自己的小提琴后,我必须承认,通过告诉"桌子没有填充物"我错了.桌子上的填充物工作正常 - 至少在Chrome和Opera(12)中查看时.以下代码片段应该也是您想要的:

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

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

尽管如此,我仍然想知道为什么填充没有添加到宽度和元素display: block;.

也可以看看:

• https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables

Answer 2

这就是原因；

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

border-spacing CSS 属性设置相邻单元格边框之间的距离。此属性仅在边框折叠分离时适用。

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

Answer 3

前面的回答表明css可以单独为ea方向设置border-[direction]。但是，一个更简单的 css-only 解决方案可以复制旧样式table cellpadding="7" border="1"，如下所示。在 CSS 中：

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

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