Question

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

编辑：谢谢，我现在意识到，我真正需要的是边界间距，或者它的html等价物，cellspacing。但出于某种原因，他们在我正在研究的网站上没有做任何事情两者都在单独的HTML上运行良好，但在网站中它们没有我认为它可能会覆盖属性，但是cellspacing和内联边框间距不应该被覆盖，对吧？（我用firefox）

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

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

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

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

所以，定义：

table {
    padding: 5px;
}

应该有效。您还可以具体告诉浏览器如何填充（或在这种情况下，不填充）您的单元格。

td {
    padding: 0px;
}

编辑： IE8不支持。遗憾。

Answer 7

您可以尝试border-spacing属性。那应该做你想要的。但您可能希望看到此answer。

Answer 8

CSS实际上不允许您在表级别执行此操作。通常，我想在达到此效果时指定cellspacing="3"。显然不是一个css解决方案，所以把它当作它的价值。

Answer 9

还有另一招：

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

table {
    border: 1px solid transparent;
}

Answer 11

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

Answer 12

vagrant reload

适用于Firefox，Chrome，IE11，Edge。

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

12 个答案:

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

12 个答案:

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