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

Question

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

编辑：谢谢，我现在意识到我真正需要的是边框间距，或者它的 html 等效项，cellspacing。
但由于某种原因，他们在我正在开发的网站上没有做任何事情。
两者都适用于单独的 HTML，但在网站中却不行。
我认为这可能是某种样式覆盖了属性，但单元格间距和内联边框间距不应该被覆盖，对吧？
（我用的是火狐）

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

Answer 1

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

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>

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

<table cellpadding="10">

或

td {
    padding: 10px;
}

Answer 2

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

Answer 3

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

因此，为了解决您的问题，我建议您使用另一个海报所建议的 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>

Answer 4

你不能...如果你发布了一张想要的效果的图片，还有另一种方法可以实现它。

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

Answer 5

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

.ablock table td {
     padding:5px;
}

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

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

Answer 6

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

padding 属性不被其子级继承。

所以，定义：

table {
    padding: 5px;
}

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

td {
    padding: 0px;
}

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

Answer 7

还有一个技巧：

/* 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; }

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

Answer 8

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

Answer 9

CSS 不允许您在表格级别执行此操作。一般我想达到这个效果的时候指定cellspacing="3"。显然不是一个 css 解决方案，所以要物有所值。

Answer 10

table.foobar
{
   padding:30px; /* if border is not collapsed */
}

or 

table.foobar
{
   border-spacing:0;
}
table.foobar>tbody
{
   display:table;
   border-spacing:0; /* or other preferred */
   border:30px solid transparent; /* 30px is the "padding" */
}

适用于 Firefox、Chrome、IE11、Edge。

Answer 11

table {
    border: 1px solid transparent;
}

Answer 12

table {
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    margin: 10px;
    width: calc(100% - 20px); 
}