你如何在CSS中指定表格填充? (表格,而不是单元格填充)
我有一个带有彩色背景的表,我需要指定表和它的内容,IE单元格之间的填充。
表标记似乎不接受填充值。
Firebug使用填充0来显示表格和tbody的布局,但不接受为它们input的任何值,所以我想他们只是没有填充属性。
但事情是我想单元格之间的相同的分离比顶部单元格与桌面和底部单元格与表底部。
再次,我想要的不是细胞填充。
编辑:谢谢,我真正需要的,现在我意识到,是边界间距,或其等效的html,cellspacing。
但由于某种原因,他们在我正在工作的网站上没有做任何事情。
两者都在单独的HTML上工作,但在网站中却没有。
我认为这可能是一些风格覆盖属性,但细胞间距和内联的边界间距不应该被覆盖,对吧?
(我使用Firefox)
编辑2:不,TD填充不是我所需要的。 使用TD填充时,相邻单元格的顶部和底部填充总括起来,因此两个单元格之间的空间(实际上是填充)比顶部单元格和桌面顶部边框之间的空间增加了一倍。 我想要在他们之间有完全相同的距离。
最简单/最好的支持方法是使用<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>
你可以为表格设定一个保证金。 或者,将表格换成div并使用div的填充。
这是你应该了解的关于表格的东西…他们不是嵌套独立元素的树。 他们是一个单一的复合元素。 尽pipe各个TD的行为或多或less像CSS块元素,但是中间的东西(TABLE和TD之间的任何东西,包括TR和TBODY)是不可分割的,并且不会陷入内联也不阻塞 。 在其他维空间中不允许有随机的HTML元素,而这样的其他空间的大小根本不可configuration。 只有HTML cellspacing
属性甚至可以得到它,并且该属性在CSS中没有模拟。
所以,为了解决你的问题,我build议或者DIV包装作为另一张海报build议,或者如果你绝对必须保持它包含在表中,你有这个丑陋的垃圾:
<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>
有趣的是,我昨天正是这样做的。 你只需要在你的CSS文件中
.ablock table td { padding:5px; }
然后将表格包装在合适的div中
<div class="ablock "> <table> <tr> <td>
你不能…也许如果你张贴了一个期望的效果图片还有另一种方法来实现它。
例如,您可以将整个表格包装在DIV中,并将填充设置为div。
随着CSS,一个表可以填充独立的单元格。
填充属性不会由其子项inheritance。
所以,定义:
table { padding: 5px; }
应该pipe用。 您还可以专门告诉浏览器如何填充(或者在这种情况下,不填充)您的单元格。
td { padding: 0px; }
编辑:不支持IE8。 抱歉。
你可以尝试border-spacing属性。 这应该做你想要的。 但是你可能想看到这个答案 。
CSS并不能真正让你在桌面上做到这一点。 一般来说,当我想要达到这个效果时,我指定了cellspacing="3"
。 显然不是一个CSS解决scheme,所以拿它的价值。
还有一个窍门:
/* 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; }
(刚刚看到我目前的工作)
table { border: 1px solid transparent; }
table { background: #fff; box-shadow: 0 0 0 10px #fff; margin: 10px; width: calc(100% - 20px); }