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

【问题标题】：CSS: how do I create a gap between rows in a table?CSS：如何在表格中的行之间创建间隙？
【发布时间】：2010-11-18 20:22:42
【问题描述】：

意思是让结果表看起来不像这样：

[===行===] [===行===] [===行===] [===行===]

...还有更多这样的：

[===行===] [===行===] [===行===] [===行===]

我尝试添加

margin-bottom:1em;

到 td 和 tr 却一无所获。有什么想法吗？

【问题讨论】：

为什么不使用单元格间距和单元格填充？
Cellspacing 也会给出列之间的间距。
Cellspacing 和 cellpadding 无效 (X)HTML。你不应该使用它们。
@freiksenet：你错了。它们是完全有效的严格 HTML4 (w3.org/TR/html401/struct/tables.html#h-11.2.1)、XHTML1 (w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd) 甚至 XHTML1.1 (w3.org/MarkUp/DTD/xhtml-table-1.mod)。
Space between two rows in a table?的可能重复

标签： html css

【解决方案1】：

所有你需要的：

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

假设您需要 1em 的垂直间隙，而没有水平间隙。如果你这样做，你可能还应该考虑控制你的行高。

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

【讨论】：

哦，对了，我试图让一个特定的列有更宽的间距，所以没想到将它应用到表格
此解决方案不允许您选择性地将间距应用于某些行。
问题没有要求。
这是一个好主意，但为了填补第一行的顶部空白，我必须找到一个我认为不是标准但有效的解决方法。给thead, tbody {position: relative; top: -{border-spacing-value} }。

【解决方案2】：

table {
    border-collapse: collapse;
}

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

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

如果这是用于布局，我会转而使用 DIV 和更多最新的布局技术，但如果这是表格数据，那就别想了。我仍然在我的网络应用程序中大量使用表格来获取数据。

【讨论】：

你测试了吗？似乎 td 可以有填充或不折叠。边框适用于折叠，但不适用于 IE。
这行得通。恼人的边距不起作用，但在这种情况下并不重要。谢谢。
这是一个非常糟糕的方法。您正在修改单元格的框以定位单元格，而不仅仅是定位单元格，方法是将单元格融合在一起，因为您希望它们分开。细胞需要背景的第二个，你就完蛋了。正确的做法是边框分离，而不是边框塌陷，用边框分离来定义，你懂的，边框分离。
这几乎是第一个实现的 CSS2，因为浏览器已经为 HTML 版本实现了表格间隙，每个人都使用它来进行像素精确布局。是的，我确定。 :)
这是 CSS 的那些奇怪的角落之一，除了阅读过规范的人之外没有人知道。（它们的数量惊人地多。类似地，float 基本上不应该像在实践中那样使用。）

【解决方案3】：

如果其他答案都不令人满意，您总是可以只创建一个空行并使用 CSS 设置适当的样式以使其透明。

【讨论】：

为什么投反对票？其他答案是有问题的：rpflo 的答案要求您使用边框折叠并扩展单元格的填充，使单元格看起来更大而不是在它们之间创建间距。 John Haugeland 的回答不允许您有选择地将间距应用于某些行。我可以继续，但是当其他答案都没有时，这个答案是适用于我的用例的一个选项。
匿名用户使用 CSS 指定单个行的高度的投票方法远远优于向表格中添加虚拟内容，因为您需要控制单个行，这不是这个问题是关于。
假行也会混淆那些期望表格行是表格行的工具（例如重要的残疾人辅助工具，以及用于导出/排序/重新格式化/等的常用插件）。作为一般规则，使用样式来控制样式有很多原因，而不是塞进假货。阅读语义标记了解更多信息。
@MGOwen 您能否说出在这种情况下会失败的辅助工具，以及它们会如何失败？我现在对没有提及细节的可访问性建议持怀疑态度，有很多糟糕的可访问性建议实际上对任何人都没有帮助（例如，HTML 5 was all wrong 的文档大纲建议，可访问性工具没有按照人们所说的工作方式工作）。
来这里是说我正在处理一个需要非常指定布局的问题，这可能是我完全忽略的最优雅的解决方案。有时最简单的解决方案是最好的。

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

Unit可以从这个列表中获得任何东西：

演示代码：

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>

【讨论】：

【解决方案6】：

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

首先给表格只设置垂直边框间距（例如 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>

【讨论】：

【解决方案7】：

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

td {
 padding: 10px 0
}

希望对您有所帮助！加油！

【讨论】：

这会在表格行内创建额外的空间。如果表格行的颜色不好看。

【解决方案8】：

如果您希望空间具有与 td 相同的背景颜色，则 TD 中的填充有效

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

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

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

【讨论】：

【解决方案9】：

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

您可以使用 div 来避免这种复杂性。只需给每个 div 留出边距。

【讨论】：

仍然有充分的理由使用表格（如表格数据）。你是对的，空行肯定是一条愚蠢的路线：P 但是有一个解决方案，边界折叠。

【解决方案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> 元素的高度，它应该会得到相同的结果。

【讨论】：

【解决方案11】：

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

以小提琴为例

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

【讨论】：

这被认为是不好的做法。原因之一是工具（如残疾用户的阅读器）期望表格行是表格行，并将导出/读取/解释与真实行混合的“假”行。请参阅上面 2014 年第一次给出相同的答案。

【解决方案12】：

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

float: left

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

编辑：正如许多人指出的那样，这不是一个合法或正确的解决方案，但如果您别无选择并且需要一些东西，这将在 IE9 中工作。

所以所有投反对票的人，也请告诉我们正确的解决方案

【讨论】：

当单元格包含不同维度的数据时，这种方法可以防止自动排列列 - 表格标记基本上没有意义。它在提供的示例中运行良好，但这不是一种可取的技术。更改单元格的文本以了解我的意思。
嘿@verism，对不起，我没明白你的意思。你能再解释一下吗？或者，如果您可以提供此方法失败的小提琴，因为我一直在广泛使用此方法，并希望处理它失败的情况。
列没有明确的划分；这意味着表格数据失去了视觉结构，变得更难阅读。 jsfiddle.net/verism/zshmN/5
@verism 是的，这是一个问题，但我们可以定义固定宽度列。我知道这不是一个好的解决方案，但我没有找到任何其他适用于 IE9 的解决方案
根据 CSS 规范，浮动表格行是不合法的。 CSS2 第 17 节要求 display:table-row 元素位于 display:table-row-group、-header-group 或 -footer-group 元素内。然而，根据第 9 节的浮动算法注入了一个匿名块父级。这意味着表格行不再具有合法的父布局，浏览器正在猜测该怎么做。这是完全不正确的。