Html 你如何在 CSS 中指定表格填充？（表格，不是单元格填充）

How do you specify table padding in CSS? ( table, not cell padding )

提问by Petruza

I have a table with a colored background and I need to specify the padding between the table and it's content, I.E. cells.
The table tag doesn't seem to accept a padding value.
Firebug shows the table and tbody's layout with padding 0 but doesn't accept any value entered for them, so I guess they just don't have the padding property.
But the thing is I want the same separation between cells than the top cells with the table top and the bottom cells with the table's bottom.
Again, what I want is not cell-padding.

我有一个带有彩色背景的表格，我需要指定表格与其内容、IE 单元格之间的填充。
table 标签似乎不接受填充值。
Firebug 使用填充 0 显示表格和 tbody 的布局，但不接受为它们输入的任何值，所以我猜它们只是没有填充属性。
但问题是我希望单元格之间的间隔与顶部单元格与表格顶部和底部单元格与表格底部相同。
同样，我想要的不是单元格填充。

EDIT: Thanks, what I really needed, I realize now, was border-spacing, or its html equivalent, cellspacing.
But for some reason, they don't do anything in the site I'm working on.
Both work great on a separate HTML, but in the site they don't.
I thought it could be some style overwriting the property, but cellspacing and an inline border-spacing shouldn't get overwritten, right?
(I use firefox )

编辑：谢谢，我真正需要的，我现在意识到，是边框间距，或者它的 html 等效，单元格间距。
但出于某种原因，他们在我正在处理的网站上没有做任何事情。
两者在单独的 HTML 上都可以很好地工作，但在站点中则不然。
我认为这可能是某种样式覆盖了该属性，但不应覆盖单元格间距和内联边框间距，对吗？
（我用火狐）

EDIT 2: No, TD padding is NOT what I need. With TD padding, top and bottom paddings of adjacent cells sum up, so there's double the space (pad actually) between two cells than between the top cell and the table top border. I want to have exactly the same distance between them.

编辑 2：不，TD 填充不是我需要的。使用 TD 填充，相邻单元格的顶部和底部填充相加，因此两个单元格之间的空间（实际上是填充）是顶部单元格和表格顶部边框之间的两倍。我希望它们之间的距离完全相同。

采纳答案by Rob

The easiest/best supported method is to use <table cellspacing="10">

最简单/最佳支持的方法是使用 <table cellspacing="10">

The css way: border-spacing(not supported by IE I don't think)

css方式：border-spacing（我不认为IE不支持）

    <!-- works in firefox, opera, safari, chrome -->
    <style type="text/css">
    
    table.foobar {
     border: solid black 1px;
     border-spacing: 10px;
    }
    table.foobar td {
     border: solid black 1px;
    }
    
    
    </style>
    
    <table class="foobar" cellpadding="0" cellspacing="0">
    <tr><td>foo</td><td>bar</td></tr>
    </table>

Edit: if you just want to pad the cell content, and not space them you can simply use

编辑：如果您只想填充单元格内容，而不是将它们隔开，您可以简单地使用

<table cellpadding="10">

OR

或者

td {
    padding: 10px;
}

回答by jpsimons

Here's the thing you should understand about tables... They're not a tree of nested independent elements. They're a single compound element. While the individual TDs behave more or less like CSS block elements, the intermediate stuff (anything between the TABLE and TD, including TRs and TBODYs) is indivisible and doesn't fall into either inlinenor block. No random HTML elements are allowed in that other-dimensional space, and the size of such other-dimensional space isn't configurable at all through CSS. Only the HTML cellspacingproperty can even get at it, and that property has no analog in CSS.

这是你应该了解的关于表格的事情......它们不是嵌套独立元素的树。它们是单一的复合元素。虽然单个 TD 的行为或多或少类似于 CSS 块元素，但中间的东西（TABLE 和 TD 之间的任何东西，包括 TR 和 TBODY）是不可分割的，既不属于inline也不属于block。在那个异维空间中不允许出现随机的 HTML 元素，并且这种异维空间的大小根本无法通过 CSS 进行配置。cellspacing甚至只有 HTML属性可以得到它，而该属性在 CSS 中没有类似物。

So, to solve your problem, I'd suggest either a DIV wrapper as another poster suggests, or if you absolutely must keep it contained in the table, you have this ugly junk:

因此，为了解决您的问题，我建议您使用另一张海报建议的 DIV 包装器，或者如果您绝对必须将它包含在表格中，那么您将拥有这个丑陋的垃圾：

<style>
    .padded tr.first td { padding-top:10px; }
    .padded tr.last td { padding-bottom:10px; }
    .padded td.first { padding-left:10px; }
    .padded td.last { padding-right:10px; }
</style>

<table class='padded'>
    <tr class='first'>
        <td class='first'>a</td><td>b</td><td class='last'>c</td>
    </tr>
    <tr>
        <td class='first'>d</td><td>e</td><td class='last'>f</td>
    </tr>
    <tr class='last'>
        <td class='first'>g</td><td>h</td><td class='last'>i</td>
    </tr>
</table>

回答by Frank Schwieterman

You could set a margin for the table. Alternatively, wrap the table in a div and use the div's padding.

您可以为表格设置边距。或者，将表格包裹在 div 中并使用 div 的填充。

回答by Cruachan

Funny, I was doing precisely this yesterday. You just need this in your css file

有趣的是，我昨天正是这样做的。你只需要在你的 css 文件中

.ablock table td {
     padding:5px;
}

then wrap the table in a suitable div

然后将表格包裹在合适的 div 中

<div class="ablock ">
<table>
  <tr>
    <td>

回答by Seb

You can't... Maybe if you posted a picture of the desired effect there's another way to achieve it.

你不能......也许如果你张贴了一张想要效果的图片，还有另一种方式来实现它。

For example, you can wrap the entire table in a DIV and set the padding to the div.

例如，您可以将整个表格包装在一个 DIV 中并将填充设置为该 div。

回答by Offirmo

There is another trick :

还有一个技巧：

/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }

(Just saw it at my current job)

（刚在我现在的工作中看到）

回答by MPelletier

With css, a table can have padding independently of its cells.

使用 css，表格可以独立于其单元格进行填充。

The padding property is not inherited by its children.

padding 属性不会由其子项继承。

So, defining:

所以，定义：

table {
    padding: 5px;
}

Should work. You could also specifically tell the browser how to pad (or in this case, not pad) your cells.

应该管用。您还可以专门告诉浏览器如何填充（或在这种情况下，不填充）您的单元格。

td {
    padding: 0px;
}

EDIT:Not supported by IE8. Sorry.

编辑：IE8 不支持。对不起。

回答by localshred

CSS doesn't really allow you to do this on a table level. Generally, I specify cellspacing="3"when I want to achieve this effect. Obviously not a css solution, so take it for what it's worth.

CSS 并没有真正允许您在表级别执行此操作。一般我会指定cellspacing="3"什么时候要达到这个效果。显然不是一个 css 解决方案，所以把它当作它的价值。

回答by Vincent Ramdhanie

You can try the border-spacing property. That should do what you want. But you may want to see this answer.

您可以尝试使用 border-spacing 属性。那应该做你想做的。但您可能想看看这个答案。

回答by Anibal Enrique Alvarez Sifonte

table {
    border: 1px solid transparent;
}