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

Question

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

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

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

Answer 1

最简单/最好支持的方法是使用

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">

OR

td {
    padding: 10px;
}

Answer 2

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

Answer 3

关于表格，您应该了解以下内容...它们不是嵌套独立元素的树。它们是单一的复合元素。虽然各个 TD 的行为或多或少类似于 CSS 块元素，但中间内容（TABLE 和 TD 之间的任何内容，包括 TR 和 TBODY）是不可分割的，并且不属于 内联 或 类型阻止。该异维空间中不允许有随机的 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

还有一个技巧：（

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

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

padding 属性不会被其子级继承。

所以，定义：

table {
    padding: 5px;
}

应该有效。您还可以专门告诉浏览器如何填充（或者在本例中，不填充）您的单元格。

td {
    padding: 0px;
}

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

Answer 8

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

Answer 9

CSS 并不允许您在表格级别上执行此操作。一般来说，当我想达到这种效果时，我会指定cellspacing="3"。显然这不是一个 CSS 解决方案，所以请尊重它的价值。

Answer 10

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

Answer 11

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 12

table {
    border: 1px solid transparent;
}