Question

意味着使得结果表看起来不像这样：

[===ROW===]
[===ROW===]
[===ROW===]
[===ROW===]

......更像这样：

[===ROW===]

[===ROW===]

[===ROW===]

[===ROW===]

我尝试添加

margin-bottom:1em;

同时 td 和 tr 但什么都没有。有什么想法吗？

Answer 1

所有你需要的：

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

假设您想要1em垂直间隙，并且没有水平间隙。如果你这样做，你应该考虑控制你的行高。

奇怪的是，人们给出的一些答案涉及边界崩溃：崩溃，其效果与问题所要求的完全相反。

Answer 2

table {
    border-collapse: collapse;
}

td {
    padding-top: .5em;
    padding-bottom: .5em;
}

除非先设置边框折叠，否则单元格不会对任何内容做出反应。您还可以在设置之后为TR元素添加边框（以及其他内容。）

如果这是用于布局，我将转向使用DIV和更新的布局技术，但如果这是表格数据，那么就把自己搞定。我仍然在我的Web应用程序中大量使用表来获取数据。

Answer 3

如果您没有边框，或者有边框并希望单元格内部有间距，则可以使用padding或line-height。据我所知，保证金对细胞和行没有影响单元格间距的CSS属性为border-spacing，但它不适用于IE6 / 7（因此您可以根据人群使用它）。

如果所有其他方法都失败了，您可以在标记中使用旧的cellspacing属性 - 但这也会为您提供列间距。有些CSS reset建议您无论如何都要设置它以获得跨浏览器支持：

/ *表格在标记* /
中仍然需要cellspacing="0"

Answer 4

如果其他答案都不令人满意，您可以只创建一个空行，并使用CSS将其设置为透明。

Answer 5

您只需在padding-top元素上使用padding-bottom和td。

Unit 可以列出此列表中的任何内容：

演示代码：

＆＃13;

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

＆＃13;

<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>

＆＃13;

Answer 6

在我看来，最简单的方法是在标记中添加填充。

> x <- c("a", "b", "c")
> s <- paste0('"', paste(x, collapse='", "'), '"')
> print(s, quote=F)
[1] "a", "b", "c"

希望这会对你有所帮助！振作！

Answer 7

这就是方式（我认为这是不可能的）：

首先仅为表格提供垂直边框间距（例如5px），并将其水平边框间距设置为0.然后，您应为每个行单元格提供适当的边框。例如，每行中最右边的单元格应该在顶部，底部和右侧具有边框。最左边的单元格应该在顶部，底部和左侧具有边框。而这两个之间的其他单元格应该只有顶部和底部的边界。像这个例子：

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

Answer 8

如果您希望空间与td

具有相同的背景颜色，则TD中的填充有效

在我的情况下，要求是标题行与其上方的空白之间的空白

通过将这种样式应用于单个单元格，我能够获得所需的分离。没有必要将它添加到所有细胞...... 可能不是最优雅的，但可能比分隔符行更优雅。

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>

Answer 9

如果您坚持使用表格设计，最好的办法是在表格的每一行之间给出一个没有内容和指定高度的空行。

您可以使用div来避免这种复杂性。只需给每个div留一个余量。

Answer 10

您也可以使用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>元素的高度，它应该给你相同的结果。

Answer 11

在下面创建另一个<tr>，并为<td>的内容添加一些空间或高度

例如查看小提琴

https://jsfiddle.net/jd_dev777/wx63norf/9/

Answer 12

将以下规则添加到tr，它应该可以正常工作

float: left

示例（在IE9中打开它）:)： http://jsfiddle.net/zshmN/

编辑：这不是许多人指出的合法或正确的解决方案，但是如果你没有选择并需要一些东西，这将在IE9中起作用。

所有那些放弃投票的人，请让我们知道正确的解决方案

CSS：如何在表格中的行之间创建间隙？

12 个答案:

演示代码：