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

94

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

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

...像这样：

[=== ROW ===]

[=== ROW ===]

[=== ROW ===]

[=== ROW ===]

我尝试添加 

margin-bottom:1em;

到td和tr都没收到。有任何想法吗？

html  css 
— 闻文
source
2
为什么不进行单元间距和单元填充？
— adatapost
1
单元间距还将在列之间提供间距。
— 胡尔
4
单元格间距和单元格填充无效（X）HTML。您不应该使用它们。
— freiksenet
8
@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）。
— 墨卡托
1
— ThisClark

Answers:

214

一切你需要的：

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

假设您想要一个1em的垂直间隙，而没有水平的间隙。如果执行此操作，则可能还应该考虑控制行高。

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

— 约翰·豪格兰
source
哦，对了，我试图让特定的列具有更大的间距，所以没想到将其应用于表格
— Jonathan。
4
此解决方案不允许您有选择地将间距应用于某些行。
— Flimm 2014年
15
问题没有要求。
— John Haugeland 2014年
这是一个好主意，但为了填补第一行的空白，我不得不采取一种不可行的解决方法，我认为这不是标准方法，但是可行。给thead, tbody {position: relative; top: -{border-spacing-value} }。
— Farzad YZ
3
我可以说我爱你吗？哦，我的上帝。您刚刚保存了我的a $$
— NikosKeyz，2016年
93 
table {
    border-collapse: collapse;
}

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

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

如果这是用于布局，那么我将转向使用DIV和更多最新的布局技术，但是，如果这是表格数据，请自行淘汰。我仍然大量使用Web应用程序中的表来存储数据。

— 瑞安·佛罗伦萨（Ryan Florence）
source
你测试了吗？看来TD可能有填充，也可能没有崩溃。边界会崩溃，但在IE上不会。
— Kobi
这工作了。令人讨厌的是，边距不起作用，但是在这种情况下并不重要。谢谢。
— MGOwen，2009年
30
这是一个非常糟糕的方法。您正在通过将单元格融合在一起来修改单元格的框以定位单元格，而不只是定位单元格，因为您希望它们分开。第二个单元格需要背景，这很麻烦。正确的方法是边界分隔，而不是边界折叠，使用边界分隔来定义边界分隔。
— John Haugeland
1
这几乎是第一个实现的CSS2，因为浏览器已经为HTML版本实现了表格空白，每个人以前都使用过这些空白以实现像素精确的布局。是的，我确定。:)
— 约翰·豪兰
1
这是CSS怪异的角落之一，只有阅读过该规范的人才知道。（它们的数量出奇地多。类似地，浮点数基本上不应在实践中使用。）
— John Haugeland 2015年
7

如果没有其他答案令人满意，那么您总是可以创建一个空行，并使用CSS适当地设置其样式以使其透明。

— 弗利姆
source
为什么要下票？其他答案是有问题的：rpflo的答案要求您使用边框折叠并扩展单元格的填充，使单元格看起来更大而不是在它们之间创建间距。John Haugeland的答案不允许您有选择地将间距应用于某些行。我可以继续，但是当其他答案都没有时，这个答案是一个适用于我的用例的选项。
— Flimm 2014年
2
匿名用户不赞成使用CSS指定单个行的高度的方法要比将假内容添加到表中要好得多，这是因为您需要控制单个行，而这并不是这个问题。
— 约翰·海格兰德
假行还会混淆那些希望表行是表行的工具（例如重要的可访问性工具（用于残疾人）以及用于导出/排序/重新格式化等的通用插件）。通常，有很多理由使用样式来控制样式，而不是塞进假货。阅读有关语义标记的更多信息。
— MGOwen
@MGOwen您能否命名在这种情况下将失败的辅助工具，以及它们将如何失败？我现在对没有提及具体细节的可访问性建议表示怀疑，那里有很多糟糕的可访问性建议实际上并没有帮助任何人（例如，HTML 5的文档大纲建议是错误的，可访问性工具没有以人们说的方式工作）。
— Flimm
4

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

如果所有其他方法均失败，则可以cellspacing在标记中使用旧属性-但这也将使您在各列之间留出间隔。一些CSS重置建议您应该进行设置以获取跨浏览器的支持：

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

— 科比
source
2

这是这种方式（我当时认为这是不可能的）：

首先，为表格仅提供垂直边框间距（例如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>
— 阿拉什·埃斯梅里（Arash Esmaeili）
source
1

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

td {
 padding: 10px 0
}

希望这个能对您有所帮助！欢呼！

— 休·勒
source
这会在表行内创建额外的空间。如果表格行的颜色看起来不好。
— Kokodoko
1

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

单位可以从此列表中进行任何操作：

在此处输入图片说明

演示代码：

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>
展开摘要

— 阿布拉·贾欣（Abrar Jahin）
source
0

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

在我的情况下，要求在标题行及其上方的内容之间留有空白

通过将此样式应用于单个单元格，我能够获得所需的分隔。不必将其添加到所有单元格中……可以说不是MOST优雅，但可能比分隔符行更优雅。

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

如果您坚持使用表格进行设计，则最好的主意是在表格的各行之间给出一个空行，其中不包含任何内容，并且指定高度。

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

— 拉胡尔
source
1
仍然有充分的理由使用表格（例如表格数据）。没错，空行无疑是一条愚蠢的路线：P但是有一个解决方案，边界崩溃。
— Ryan Florence
-1

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

-1

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

在此处输入图片说明

例如检出小提琴

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

— Jaydeep Chauhan
source
这被认为是不良做法。原因之一是工具（如残疾用户的阅读器）期望表行是表行，并且将导出/读取/解释与真实行混合的“假”行。参见上面的2014年第一次给出相同的答案。
— MGOwen
1
@MGOwen感谢您的建议。完全同意
— Jaydeep Chauhan
-4

在tr中添加以下规则，它应该可以工作

float: left

样本（在IE9教学课程中打开它：））：http : //jsfiddle.net/zshmN/

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

因此，所有在此投下反对票的人，也请让我们知道正确的解决方案

— 桑迪普（Sandeep Choudhary）
source
3
当单元格包含具有不同维度的数据时，此方法可防止对列进行自动对齐-表标记本质上是毫无意义的。在提供的示例中，它已经足够好用了，但这不是明智的选择。更改单元格的文本以了解我的意思。
— verism
嘿@verism，对不起，但我没明白你的意思。你能解释一下吗？或者，如果您可以提供一个方法失败的小提琴，因为我已经在广泛使用此方法，并且想解决它失败的情况。
— Sandeep Choudhary
没有明确的列划定；这意味着表格数据会失去其视觉结构并变得难以阅读。jsfiddle.net/verism/zshmN/5
— verism
@verism这是一个问题，但是我们可以定义固定宽度的列。我知道这不是一个好的解决方案，但是我没有找到其他适用于IE9的解决方案
— Sandeep Choudhary
1
根据CSS规范，浮动表格行不合法。CSS2第17节要求display：table-row元素位于display：table-row-group，-header-group或-footer-group元素之内。但是，根据第9节的浮动算法会注入匿名块父对象。这意味着表行不再具有合法的父级布局，并且浏览器正在猜测该怎么做。这完全是不正确的。
— 约翰·海格兰德
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.