Html 表格填充不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21864121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table padding not working
提问by Hank
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:
我有一个表格，它位于一个充满正文和其他内容的父 div 中。我有以下似乎不起作用的 CSS：
table {width:100%; padding: 0 50px 0 50px;}
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.
当我使用边距而不是填充时，它会起作用——但是，对于宽度：100%，使用边距将整个内容从父 div 中移出。我想我可以减少宽度或指定一个确切的像素数量，但网站的其余部分会随着屏幕大小而缩放，我也希望这样工作。
回答by feeela
There are some special properties related to tables. The one you are looking for is border-spacing.
有一些与表相关的特殊属性。您正在寻找的是border-spacing.
table {
width: 100%;
border-collapse: separate;
border-spacing: 0 50px;
}
Example: http://jsfiddle.net/feeela/fPuQ6/
示例：http: //jsfiddle.net/feeela/fPuQ6/
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:
更新：在玩弄我自己的小提琴之后，我必须承认，我说“桌子没有填充”是错误的。桌子上的填充效果很好——至少在 Chrome 和 Opera (12) 中查看时是这样。以下代码段也应该是您想要的：
table {
width: 100%;
padding: 0 50px 0 50px;
}
See the updated version of the fiddle: http://jsfiddle.net/feeela/fPuQ6/3/
查看小提琴的更新版本：http: //jsfiddle.net/feeela/fPuQ6/3/
Nonetheless I'm still wondering why the padding isn't added to the width as for an element with display: block;.
尽管如此，我仍然想知道为什么对于带有display: block;.
See also:
也可以看看：
回答by murspieg
The prior answer shows that css can set border-[direction] for ea direction separately. But a much simpler css-only solution that replicates the old-style table cellpadding="7" border="1"can be the following. In CSS:
前面的回答表明css可以单独为ea方向设置border-[direction]。但是，一个更简单的 css-only 解决方案可以复制旧样式table cellpadding="7" border="1"，如下所示。在 CSS 中：
table {
border-collapse:collapse;
width: 100%;
}
td {
padding: 7px;
border:1px solid;
}
Shown in this fiddle: http://jsfiddle.net/b5NW5/77
在这个小提琴中显示：http: //jsfiddle.net/b5NW5/77
回答by Ozichukwu
This is the reason why;
这就是原因；
From MDN, to use padding in tables, you need to have border-collapse: separate;so as to allow for the use of border-spacingbecause border-spacingis a factor in the calculation of distance between the outer table edge and the edge of the outer cells (see quotes from MDNbelow). After that you can now assign paddinga value. You can also set border-spacing: 0px;to cancel out the addition of border-spacingto the padding.
从MDN 开始，要在表格中使用填充，您需要border-collapse: separate;允许使用border-spacing因为border-spacing是计算外部表格边缘和外部单元格边缘之间距离的一个因素（请参阅下面的MDN引述）。之后，您现在可以分配padding一个值。您还可以设置border-spacing: 0px;取消border-spacing对填充的添加。
The border-spacing CSS property sets the distance between the borders of adjacent cells. This property applies only when border-collapse is separate.
The border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.
border-spacing CSS 属性设置相邻单元格边框之间的距离。此属性仅在边框折叠分离时适用。
边框间距值也沿表格的外边缘使用，其中表格边框与第一/最后一列或行中的单元格之间的距离是相关（水平或垂直）边框间距和表格上的相关（顶部、右侧、底部或左侧）填充。
回答by kheya
You can add the cell padding in the table definition OR if you want to use CSS then use can try this:
您可以在表定义中添加单元格填充，或者如果您想使用 CSS 然后使用可以试试这个：
If using 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>
If using inline:
如果使用内联：
<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>
You can see this in action here: http://jsfiddle.net/b5NW5/1/
你可以在这里看到这个：http: //jsfiddle.net/b5NW5/1/
Hope it helps
希望能帮助到你
