表格中两行之间的空格？

754

通过CSS可以做到吗？

我尝试着 

tr.classname {
  border-spacing: 5em;
}

无济于事。也许我做错了什么？

html  css 
— 马林
source
什么是浏览器，您能否提供代码段（html / css）？
— Patrick Desjardins，
好吧，我正在使用ff3，因为我知道应该支持规则，但现在我正在寻求在ff3中修复。我到目前为止还没有尝试过间隔和填充。productlistingitem是主表<table class =“ productListingItem” border =“ 0” cellpadding =“ 10” cellspacing =“ 0”> <tr> <tr> <td class =“ dragItem”>
— Marin
1
也许是因为border-spacing是关系到一个属性table，而不是tr。尝试table.classname {border-spacing:5em}。 Note注意：如果指定！DOCTYPE，则IE8支持border-spacing属性。
— Varun Natraaj 2014年
没有边框时，我使用行高。
— Leah
这回答了你的问题了吗？CSS：如何在表格的行之间创建间隙？
— alexalejandroem

Answers:

523

您需要在td元素上使用填充。这样的事情应该可以解决问题。当然，您可以使用顶部填充而不是底部填充来获得相同的结果。

在下面的CSS代码中，大于号表示填充仅应用于将td子tr级直接指向class元素的元素spaceUnder。这将使使用嵌套表成为可能。（示例代码中的单元格C和D。）我不太确定浏览器是否支持直接子选择器（例如IE 6），但它不应破坏任何现代浏览器中的代码。

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}
<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>
展开摘要

这应该如下所示：

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+
— 扬·阿加德（Jan Aagaard）
source
1
code.google.com/p/ie7-js也为ie5.5，ie6，ie7中的子选择器添加了支持
— Antony Hatchkins 2012年
402
除此之外，当您的行具有背景色并且您实际上希望在行之间使用WHITESPACE时，这根本无法解决问题。
— 西蒙·伊斯特
6
@Simon：空格通常是指空白，而不是白色。如果要给行之间的空间加色，可以尝试使用td-elements上的CSS <code> border-bottom </ code>属性。那可能只能使用1px边框正确渲染。另一个但不太优雅的解决方案是使用空行。
— Jan Aagaard'2
18
@Jan：是的，这正是我的观点... 在行之间放置透明的空白非常困难。您的解决方案在某些情况下会有所帮助，但不能解决该问题。插入一个空表行可能会起作用，但这很麻烦。一bottom-border组透明也可能正常工作，但我不知道它是如何跨浏览器兼容。
— 西蒙·伊斯特
1
— eggy 2013年
387

在父表中，尝试设置 

border-collapse:separate; 
border-spacing:5em;

加上边框声明，然后看是否达到您想要的效果。但是请注意，IE不支持“分隔边框”模型。

— 用户名
source
5
是的，这种方法将是理想的，除了IE 7不支持它。有关浏览器的支持，请参阅：quirksmode.org/css/tables.html
— Simon East
7
同样，它控制着表中所有行的间距，您不能为单个行设置行间距（这可能是OP想要实现的）。
— 西蒙·伊斯特
1
Chrome和Firefox之间不一致。如果您有thead和tbody，它将border-spacing在Chrome 中将两者之间加倍（而在Firefox中则为1）。
— 卡米洛·马丁
91
这是实际的答案，专门border-spacing: 0 1em用于获取仅行之间的间距。
— igneosaur 2014年
1
@igneosaur我尝试按照您所说的做，但是它仍然在所有行之间增加了间距，而不仅仅是前两行。你能提供一个工作的jsfiddle吗？
— user3281466
184

您的表中有包含任何数据的ID相册...我省略了trs和tds

<table id="albums" cellspacing="0">       
</table>

在CSS中：

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}
— Pradyut Bhattacharya
source
15
这对我来说很好。边界间距的第一个参数是单元格之间的水平间距，第二个参数是垂直间距。
如果好的旧HTML可以胜任，不一定总是要花哨的CSS ：)
— luator
1
— КонстантинВан
是否可以仅申请“ tbody”内部的tr？
— Jaison
129

由于我在桌子后面有一个背景图片，所以用白色填充物伪造它是行不通的。我选择在内容的每一行之间放置一个空行：

<tr class="spacer"><td></td></tr>

然后使用CSS为间隔行赋予一定的高度和透明的背景。

— 科尔曼
source
3
我想这可能更灵活。您无法总是控制何时需要空间（动态生成的页面）。
— Stefan Kendall
10
这让我想起了90年代，当时几乎不存在CSS支持，并且大多数布局都使用表格。不过，我仍然给它+1，因为在实际在表行之间留出空间时，其他“答案”并没有任何改善。
— 迷宫
@labyrinth自90年代以来，变化不大。关于HTML，这一切都变得更加强大和混乱。
— maaartinus 2014年
73

来自Mozilla开发人员网络：

border-spacing CSS属性指定相邻单元格的边框之间的距离（仅适用于分隔的边框模型）。这等效于表示性HTML中的cellspacing属性，但是可选的第二个值可用于设置不同的水平和垂直间距。

最后一部分经常被监督。例：

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

更新

我现在知道，OP希望特定的单独行具有增加的间距。我添加了一个带有tbody元素的设置，该设置可以在不破坏语义的情况下完成该任务。但是，我不确定所有浏览器是否都支持它。我是用Chrome浏览器制作的。

下面的示例用于显示如何使它看起来像表中存在单独的行，完全散发出CSS的甜味。还为第一行提供了更大的间距tbody。随时使用！

支持通知：IE8 +，Chrome，Firefox，Safari，Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}
<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>
展开摘要

— Justus Romijn
source
如果我想要在两个特定行之间保留一些空白，我只需添加一个间隔行<tr> <td colspan =“ 2” style =“ padding-bottom：1em;”> </ td> </ tr>
— Paul Taylor
那会行得通，但在语义上是不正确的（例如，分隔符行不是实际的数据行，就像其他行一样。这对于使用屏幕阅读器或其他辅助设备的人以及索引目的和可能并没有太大的区别，但是在开发网站时让它重新
— 记住
的确如此，如果他实际上是使用表格来代表表格。如果他只是使用表格作为以表格形式显示数据的一种方式，那么我认为插入行来表示两个项目之间的间隙更有意义，而不仅仅是在上面的td要素上添加空格或位于该行下方，因为用户想要做的是在两行之间添加空格，而不是增加一行内元素的大小。
— 保罗·泰勒
53

您可以尝试添加分隔符行：

的HTML：

<tr class="separator" />

CSS：

table tr.separator { height: 10px; }
— 丹尼斯
source
7
对于IE，没有身体的tr不会被识别。也添加虚拟td标签。
— 2012年
问题在于，在HTML5中，W3C验证器将发出一条错误消息：“表行的宽度为0列，小于第一行建立的列数”。
— David Grayson
很好，我添加了另一个<tr>，<td>和<p>并将p标签的可见性设置为隐藏。:-)
— 杰普
47

您无法更改表格单元格的边距。但是您可以更改填充。更改TD的填充，这将使单元格更大，并使用增加的填充将文本推离侧面。但是，如果您有边界线，它仍然不是您想要的。

— 罗伯特·巴特
source
是的，填充将推动边境下来，这样border-bottom并padding-bottom意味着边界将填充以下。
— Dan Dascalescu 2013年
21

看一下border-collapse：独立属性（默认）和 border-spacing属性。

首先，必须使用border-collapse 分隔它们，然后可以使用border-spacing定义列和行之间的空间。

实际上，这两种CSS属性在每个浏览器中都得到很好的支持， 请参见此处。

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}
<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>
展开摘要

— 西诺
source
20

好，你可以

tr.classname td {background-color:red; border-bottom: 5em solid white}

确保在td而非行上设置了背景色。这应该适用于大多数浏览器...（Chrome，即经过ff测试）

— 保罗
source
至少在Firefox中，这会造成奇怪的垂直对齐问题
— cjohansson
20

您需要border-collapse: separate;在桌子上摆放；大多数浏览器默认样式表均始于border-collapse: collapse;，这会减少边框间距。

另外，border-spacing：在而TD不是上进行TR。

尝试：

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>
— 约翰·豪格兰
source
1
边框间距也适用于非td表
— silversky 2013年
4
谢谢。我之前曾在评论修复程序中感谢您，但是一个过分热心的编辑想要更改我的样式并在此过程中破坏了代码，也消除了我的感谢。我现在将其放在无法编辑的位置。
— 约翰·海格兰
18

您可以在表格中使用line-height：

<table style="width: 400px; line-height:50px;">
— alansiqueira27
source
您是正确的，但文本也会得到行高，这不好，我认为您应该看到科尔曼！他有很好的解决方案
— Waqas Tahir，2015年
11

答案来不及了:)

如果将float应用于tr元素，则可以在具有margin属性的两行之间进行间隔。

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}
— 奥古赞·奥泽尔
source
12
太恐怖了 这实际上是在将display属性设置block为该行。这使行具有边距。垂直边距“ 适用于：除表显示类型以外的所有元素，而不是表标题，表和内联表 ”。由于table-row不是所有这些例外，因此不算在内。通过执行操作，您可能会达到相同的效果。tr {display:block;}但是，我会在复杂的表中使用这两种方法中的任何一种，但请注意。它可能不会达到您的期望。
— sholsinger
这很可怕，但是确实有效。不是在ie7中，而是直接在表中的单元格间距在ie7中起作用。
— 2013年
浮动行不是一个好的解决方案。特别是如果您的页面大于行宽度的2倍时。将width属性添加到两个标签中
— AndreaCi 2014年
11

为了产生行间距的错觉，将背景色应用于行，然后创建带有白色的粗边框，从而创建一个“空格” :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}
— 瓦伦·纳特拉伊（Varun Natraaj）
source
9

分配表间距的正确方法是使用cellpadding和cellspacing，例如

<table cellpadding="4">
— 乌斯曼·扎赫（Usman Zaheer）
source
5
您可以通过CSS来做到这一点，我会说它更“正确”（除了它更优雅之外，将样式从标记移到CSS可以节省带宽）。
— 卡米洛·马丁
2
它不会节省带宽。我实际上使用更多。假设您不是仅为此添加样式表，就需要向该表添加选择器，可能还需要添加ID或名称。多字节，少字节。
— majinnaibu
9

我在努力解决类似问题时偶然发现了这一点。我发现Varun Natraaj的答案很有帮助，但我会改用透明边框。

td { border: 1em solid transparent; }

透明边框仍具有宽度。

— 索龙文
source
6

适用于2015年的大多数最新浏览器。简单的解决方案。它不适用于透明，但是与Thoronwen的答案不同，我无法获得任何尺寸的透明渲染。

    tr {
      border-bottom:5em solid white;
    }
— FlavorScape
source
3

简而言之div内td并设置以下样式div：

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;
— 纳德
source
2

我意识到这是对旧线程的一种答案，可能不是所要求的解决方案，但是尽管所有建议的解决方案都无法满足我的需要，但该解决方案对我有用。

我有2个表格单元格，一个具有背景色，另一个具有边框色。上述解决方案消除了边界，因此右侧的单元格似乎漂浮在空中。该诀窍的解决方案是更换table，tr并且td用的div和相应类：表是div id="table_replacer"，TR将div class="tr_replacer"与TD将div class="td_replacer"（改变结束标记的div也很明显）

为了解决我的问题，css是：

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

希望这对某人有帮助。

— 博尔沃
source
恕我直言，这种解决方案等效于使用我尝试过的常规表，tr，td模式和样式tr {display：block;}。问题：表格看起来不同，因为td元素未呈现为表格宽度，而是在tr内浮动。意思是，所有行的td元素不再垂直对齐。
— Andreas Stankewitz
0

您可以用<div />元素填充<td />元素，然后将任何边距应用于所需的div。为了使行之间具有可见的空间，可以在<tr />元素上使用重复的背景图像。（这是我今天使用的解决方案，尽管我没有对其进行任何进一步的测试，但它似乎在IE6和FireFox 3中都可以使用。）

另外，如果您不想修改服务器代码以将<div />放入<td />内，则可以使用jQuery（或类似方式）将<td />内容动态包装在<div / >，使您能够根据需要应用CSS。

— 约翰·费希尔
source
0

这是一个简单而优雅的解决方案，但有一些警告：

  • 您实际上无法使间隙透明，需要给它们指定特定的颜色。
  • 您不能在间隙上方和下方的边界的圆角
  • 您需要知道表格单元格的填充和边框

考虑到这一点，请尝试以下操作：

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

您实际上在做的是贴一个矩形 ::before块到要排成一行的所有单元格的顶部。这些块从单元格中伸出一点以重叠现有边界，将其隐藏。这些块只是夹在中间的顶部和底部边框：顶部边框形成间隙，底部边框重新创建单元格原始顶部边框的外观。

请注意，如果表格和单元格周围都有边框，则需要进一步增加“块”的水平-ve边距。因此，对于4px的表格边框，您可以使用：

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

并且如果您的表格使用border-collapse:separate而不是border-collapse:collapse，那么您将需要（a）使用完整的表格边框宽度：

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

...以及（b）替换现在需要在间隙下方显示的边框的双倍宽度：

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

如果愿意，该技术可以轻松地应用于.gapafter版本，也可以轻松创建垂直（列）间隙而不是行间隙。

这是一个可在实际操作中查看的Codepen：https ://codepen.io/anon/pen/agqPpW

— 多恩
source
-5

如上所示执行此操作...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; }

删除垂直列对齐方式，因此请小心使用

— 理查德
source
-17

你有没有尝试过：

tr.classname { margin-bottom:5em; }

另外，每个td也可以调整：

td.classname { margin-bottom:5em; }

要么

 td.classname { padding-bottom:5em; }
— 八月
source
这真的有效吗？我有div.el { display: table-row; margin: 10px; }，而margin不做任何事。我知道它与实际的表有些不同，但是不应该...
— bradlis7 2010年
20
表格行/单元格没有空白。
— Espen
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.