66

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

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

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

4

12 回答 12

51

最简单/最受支持的方法是使用<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;
}
于 2009-11-17T18:30:50.570 回答
26

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

于 2009-11-17T18:04:14.867 回答
26

这是您应该了解的关于表格的事情......它们不是嵌套独立元素的树。它们是单一的复合元素。虽然单个 TD 的行为或多或少类似于 CSS 块元素,但中间的东西(TABLE 和 TD 之间的任何东西,包括 TR 和 TBODY)是不可分割的,既不属于inline也不属于block。在那个异维空间中不允许有随机的 HTML 元素,并且这种异维空间的大小根本无法通过 CSS 进行配置。只有 HTMLcellspacing属性甚至可以得到它,并且该属性在 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>
于 2009-11-19T06:21:39.977 回答
6

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

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

于 2009-11-17T18:03:10.427 回答
6

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

.ablock table td {
     padding:5px;
}

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

<div class="ablock ">
<table>
  <tr>
    <td>
于 2009-11-17T18:12:20.427 回答
3

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

padding 属性不被其子级继承。

所以,定义:

table {
    padding: 5px;
}

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

td {
    padding: 0px;
}

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

于 2009-11-17T18:25:02.407 回答
3

还有一个技巧:

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

(刚刚在我现在的工作中看到它)

于 2016-04-21T17:43:17.310 回答
1

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

于 2009-11-17T18:02:29.223 回答
1

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

于 2009-11-17T18:19:34.260 回答
1
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。

于 2019-09-09T00:31:32.787 回答
0
table {
    border: 1px solid transparent;
}
于 2015-03-25T04:40:38.343 回答
0
table {
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    margin: 10px;
    width: calc(100% - 20px); 
}
于 2016-11-11T05:55:55.983 回答