表填充不工作 [英] Table padding not working

问题描述

我有一个表，它位于一个充满主体文本和其他内容的父div。我有以下CSS似乎不工作：

I have a table that sits within a parent div full of body text and other content. I have the following CSS which does not seem to work:

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

当我使用边距而不是填充时， with width：100％，using margins scoots the whole thing out of parent div。我想我可以减少宽度或指定一个确切的像素数量，但网站的其余部分与屏幕尺寸缩放，我也希望这样工作。

When I use margins instead of padding, it works—however, with width:100%, using margins scoots the whole thing out of the parent div. I guess I could reduce the width or specify an exact pixel amount, but the rest of the site scales with screen size and I'd like this to work like that, too.

提前感谢。

推荐答案

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

There are some special properties related to tables. The one you are looking for is border-spacing.

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

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

更新：使用我的自己的小提琴我必须承认，我错了，告诉一个表没有填充。桌面上的填充工作正常 - 至少在Chrome和Opera（12）中查看。以下代码段应该也希望您也需要：

UPDATE: After playing around with my own fiddle I must admit, that I was wrong by telling that "a table doesn't have a padding". The padding on the table is working fine – at least when viewed in Chrome and Opera (12). The following snippet should do want you want too:

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

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

See the updated version of the fiddle: http://jsfiddle.net/feeela/fPuQ6/3/

尽管如此仍然想知道为什么padding不像 display：block; 的元素那样添加到宽度。

Nonetheless I'm still wondering why the padding isn't added to the width as for an element with display: block;.

另请参阅：

• https://developer.mozilla.org/zh-CN/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

• 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

这篇关于表填充不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！