CSS:我如何创build表中的行之间的差距?
使得结果表看起来不像这样:
[=== ROW ===] [=== ROW ===] [=== ROW ===] [=== ROW ===]
…更像这样:
[=== ROW ===] [=== ROW ===] [=== ROW ===] [=== ROW ===]
我尝试添加
margin-bottom:1em;
同时td和tr但没有得到。 有任何想法吗?
table { border-collapse: collapse; } td { padding-top: .5em; padding-bottom: .5em; }
单元格不会对任何东西做出反应,除非先设置border-collapse。 一旦设置了TR元素,您也可以添加边界(除此之外)。
如果这是布局,我会转向使用DIV和更多最新的布局技术,但如果这是表格数据,请自己敲一下。 我仍然在我的Web应用程序中大量使用数据表。
一切你需要的:
table { border-collapse: separate; border-spacing: 0 1em; }
假设你想要1em垂直间隙,没有横向间隙。 如果你这样做,你也应该看看控制你的行高。
人们给出的一些答案涉及边界崩溃:崩溃,其效果与问题所要求的完全相反。
如果您没有边框或边框,并希望单元格内部有间距,则可以使用padding
或line-height
。 据我所知,保证金对单元格和行没有影响。
单元格间距的CSS属性是border-spacing
,但在IE6 / 7上不起作用(所以你可以根据你的人群使用它)。
如果一切都失败了,你可以在你的标记中使用旧的cellspacing
属性 – 但是这也会给你在列之间的间隔。 一些CSS重置build议您无论如何设置它以获得跨浏览器支持:
/ *表格在标记中仍然需要
cellspacing="0"
* /
如果没有其他答案是令人满意的,那么你总是可以创build一个空行 ,并使用CSS对其进行适当的设置以使其透明。
只要你可以在td
元素上使用padding-top
和padding-bottom
。
单位可以从这个列表中任何东西
演示代码 –
td { padding-top: 10px; padding-bottom: 10px; }
<table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table>
在我看来,最简单的方法是添加填充到你的标签。
td { padding: 10px 0 }
希望对你有帮助! 欢呼!
如果你想要空间与td具有相同的背景颜色,TD中的填充将起作用
在我的情况下,要求是标题行之间的空白和上面的任何东西
通过将这种造型应用于单个细胞,我能够获得所需的分离。 没有必要将它添加到所有的单元格…可以说不是最优雅的,但可能比分隔行更优雅。
<td colspan="10"> <div class="HeaderRow" style="margin-top:10px;"> <%# Eval("VendorName")%> </div> </td>
如果你坚持使用表的devise,最好的办法是在表中的每行之间给出一个没有内容和指定高度的空行。
你可以使用div来避免这种复杂性。 只是给每个div一个保证金。
你也可以使用CSS修改每一行的高度。
<head> <style> tr { height:40px; } </style> </head> <body> <table> <tr> <td>One</td> <td>Two</td> </tr> <tr> <td>Three</td> <td>Four</td> </tr> <tr> <td>Five</td> <td>Six</td> </tr> </table> </body>
你也可以修改<td>
元素的高度,它应该给你相同的结果。
将下面的规则添加到tr,它应该工作
float: left
示例(打开它在IE9 offcourse :)): http : //jsfiddle.net/zshmN/
编辑:这不是许多人指出的合法或正确的解决scheme,但如果你没有select,需要的东西,这将在IE9的工作。
所以所有投票的人,请让我们知道正确的解决办法