如何在CSS中指定表填充？(表,不是单元格填充)

Question

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

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

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

Answer 1

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

css方式:边框间距(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)都是不可分割的,不会陷入内联或阻塞.在该另一维空间中不允许随机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

还有另一个技巧：

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

好笑,我昨天正是这样做的.你只需要在你的css文件中使用它

.ablock table td {
     padding:5px;
}

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

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