表格中两行之间的空间？

Posted 2023-02-23

【中文标题】表格中两行之间的空间？

【英文标题】：Space between two rows in a table?

【发布时间】：2010-09-25 22:46:44

【问题描述】：

这可以通过 CSS 实现吗？

我在努力

tr.classname 
  border-spacing: 5em;

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

【问题讨论】：

什么是浏览器，你能提供你的代码（html/css）的sn-p吗？

好吧，我正在使用 ff3，因为我知道 ie 应该支持规则，但现在我希望在 ff3 中修复。我尝试了间距和填充到目前为止没有运气。 productlistingitem 是主表

可能是因为border-spacing 是与table 相关的属性，而不是tr。试试table.classname border-spacing:5em。 Note: 如果指定了 !DOCTYPE，IE8 支持边框间距属性。 我在没有边框时使用 line-height。 这能回答你的问题吗？ CSS: how do I create a gap between rows in a table?

【参考方案1】：

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

在下面的 CSS 代码中，大于号表示填充仅适用于 td 元素，这些元素是类为 spaceUnder 的 tr 元素的直接子元素。这将使使用嵌套表成为可能。 （示例代码中的单元格 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 |
+---+---+

【讨论】：

code.google.com/p/ie7-js 在 ie5.5、ie6、ie7 中也增加了对子选择器的支持

除了当你的行有背景色并且你实际上想要在你的行之间留出空白时，这根本不能解决问题。

@Simon：空白通常是指空白，而不是专门指白色。如果要对行之间的空间进行着色，可以尝试使用 td-elements 上的 CSS border-bottom 属性。那可能只会使用 1px 边框正确渲染。另一个但不那么优雅的解决方案是使用空行。

@Jan：是的，正是我的意思...在行之间放置 transparent 空白空间非常困难。您的解决方案在某些情况下会有所帮助，但不能解决该问题。插入一个空的表格行可能会起作用，但它很丑陋。 bottom-border 设置为透明也可能有效，但我不确定它的跨浏览器兼容性如何。

@Simon：科尔曼有一个ugly, yet working solution to your issue。

【参考方案2】：

在父表中，尝试设置

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

加上一个边框声明，看看是否达到你想要的效果。 但请注意，IE 不支持“分离边框”模型。

【讨论】：

是的，这个方法会是理想的，除了 IE 7 不支持它。有关浏览器支持，请参阅：quirksmode.org/css/tables.html

此外，它控制表格中所有行的间距，您不能为单个行设置行间距（这是 OP 可能想要实现的）。

这在 Chrome 和 Firefox 之间是不一致的。如果您有 thead 和 tbody，它将在 Chrome 中呈现两个 border-spacing（但在 Firefox 中只有一个）。

这是实际的答案，专门设置 border-spacing: 0 1em 以获取仅行之间的间距。

@igneosaur 我试着按照你说的做，但它仍然增加了所有行之间的间距，而不仅仅是前两行。你能提供一个工作的jsfiddle吗？

【参考方案3】：

你有一个带有任何数据的 id 专辑的表...我省略了 trs 和 tds

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

在css中：

table#albums 

    border-collapse:separate;
    border-spacing:0 5px;

【讨论】：

这对我来说效果很好。 border-spacing 的第一个参数是单元格之间的水平间距，第二个是垂直间距。

如果好的旧 HTML 可以完成这项工作，它并不总是需要花哨的 CSS :)

The cellspacing attribute of <table> is not supported in HTML5.

可以只申请“tbody”里面的tr吗？

【参考方案4】：

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

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

然后使用 css 给间隔行指定高度和透明背景。

【讨论】：

我认为这可能更灵活。您无法始终控制何时需要空间（动态生成的页面）。

这让我想起了 90 年代，当时几乎不存在 CSS 支持，大多数布局都使用表格。不过，我仍然给它 +1，因为其他“答案”在实际使空间 之间 表行方面并没有更好。

@labyrinth 自 90 年代以来变化不大。关于 HTML，一切都变得更加强大和混乱。

最佳答案在这里。

【参考方案5】：

From Mozilla Developer Network:

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>

【讨论】：

如果我想要两个特定行之间的一些垂直空间，我只需添加一个间隔行 这可行，但在语义上不正确（例如，您的分隔行与其他行不同，其中包含数据的实际行。这对于使用屏幕阅读器或其他辅助设备的人来说可能很烦人，以及用于索引目的等。它可能不会有很大的不同，但在开发网站时最好将其保留在您的脑海中:) 确实如此，如果他实际上是用一个表来表示一个表。如果他只是使用表格作为以表格方式显示数据的一种方式，那么我认为插入一行来表示两个项目之间的间隙而不是仅仅为上面的任何一个 td 元素添加间距更有意义或在行下方，因为用户想要做的是在两行之间添加空格，而不是增加一行内元素的大小。

【参考方案6】：

您可以尝试添加分隔行：

html:

<tr class="separator" />

css:

table tr.separator  height: 10px; 

【讨论】：

对于 IE，没有正文的 tr 将无法识别。也添加虚拟 td 标签。

问题在于，在 HTML5 中，W3C validator 会发出错误消息“表格行的宽度为 0 列，小于第一行建立的列数”。

很好，我添加了另一个 、 和

【参考方案7】：

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

【讨论】：

是的，padding 会将边框向下推，所以border-bottom 和padding-bottom 表示边框将低于padding。

【参考方案8】：

查看border-collapse: separate 属性（默认）和border-spacing 属性。

首先，你必须用border-collapse分隔它们，然后你可以用定义列和行之间的空间边框间距 .

这两个 CSS 属性实际上在每个浏览器上都得到了很好的支持，see here。

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>

【讨论】：

这仅在您使用白色单元格和白色背景时才有效。

@Sixteen 这不是真的.. 为什么它应该与其他颜色不同？

我误解了答案，我的错。重新检查后，这个解决方案对我来说很好，效果很好。

【参考方案9】：

好的，可以的

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

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

【讨论】：

这会产生奇怪的垂直对齐问题，至少在 Firefox 中是这样

【参考方案10】：

需要在桌子上设置border-collapse: separate;；大多数浏览器默认样式表都以border-collapse: collapse; 开头，这会消除边框间距。

另外，边框间距：继续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>

【讨论】：

border-spacing 也适用于 table not td

谢谢。我之前在评论修复中感谢了你，但是一个过分热心的编辑想要改变我的风格并在这个过程中破坏了代码也删除了我说的谢谢。我现在把它放在不能编辑的地方。

【参考方案11】：

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

<table style="width: 400px; line-height:50px;">

【讨论】：

你是对的，但是文本也会得到不好的行高，我认为你应该看看科尔曼！他有很好的解决方案

【参考方案12】：

tr  
    display: block;
    margin-bottom: 5px;

【讨论】：

我更喜欢 display: inline-block;

【参考方案13】：

回答太晚了:)

如果将浮点数应用于tr 元素，则可以使用margin 属性在两行之间留出空间。

table tr
float: left
width: 100%;


tr.classname 
margin-bottom:5px;

【讨论】：

这太可怕了。这实际上是将行的display 属性设置为block。这允许该行有一个边距。垂直边距“Applies to: all elements except those with table display types other than table-caption, table, and inline-table”。由于table-row 不是这些例外中的任何一个，因此它不算在内。你可以通过tr display:block; 达到同样的效果，但我会警惕在复杂的表格中使用这些方法中的任何一种。它可能不会达到您的预期。

这很可怕，但它奏效了。不在 ie7 中，但直接在表格中的单元格间距在 ie7 中有效。

浮动行不是一个好的解决方案。尤其是当您的页面大于行宽的 2 倍时。将宽度属性添加到两个标签

【参考方案14】：

为了创造行间距的错觉，将背景颜色应用于行，然后用白色创建一个粗边框，以便创建一个“空间”:)

tr 

   background-color: #FFD700;
   border: 10px solid white;

【参考方案15】：

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

td  border: 1em solid transparent; 

透明边框仍然有宽度。

【参考方案16】：

为表格指定间距的正确方法是使用 cellpadding 和 cellspacing，例如

<table cellpadding="4">

【讨论】：

你可以通过 CSS 做到这一点，我会说它更“正确”（除了它更优雅，将样式从标记移动到 CSS 可以节省带宽）。

它不会节省带宽。我实际上使用更多。假设您没有为此添加样式表，您需要向该表添加一个选择器，可能还有一个 id 或名称。那是更多的字节而不是更少。

【参考方案17】：

适用于 2015 年最新的浏览器。简单的解决方案。它不适用于透明，但与 Thoronwen 的回答不同，我无法以任何尺寸呈现透明。

    tr 
      border-bottom:5em solid white;
    

【参考方案18】：

只需将div 放在td 内，并设置div 的以下样式：

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

【参考方案19】：

最好的方法是添加带有height 属性的<td>：

<td  colspan="2"></td>

你可以阅读更多关于colspanhere的信息。

在下面的例子中，我们的table是green，我们的td带有height属性是yellow：

<table style="background-color: green">
    <tr>
        <td>
            <span>Lorem</span>
        </td>
        <td>
            <span>Ipsum</span>
        </td>
    </tr>
    <tr>
        <td  colspan="2" style="background-color: yellow"></td>
    </tr>
    <tr>
        <td>
            <span>Sit</span>
        </td>
        <td>
            <span>Amet</span>
        </td>
    </tr>
</table>

【参考方案20】：

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

【讨论】：

所有你需要的......

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?

【参考方案21】：

我意识到这是对旧线程的回答，可能不是所要求的解决方案，但虽然所有建议的解决方案都没有满足我的需求，但这个解决方案对我有用。

我有 2 个表格单元格，一个带有背景颜色，另一个带有边框颜色。上述解决方案删除了​​边框，因此右侧的单元格似乎漂浮在半空中。 解决问题的解决方案是将table、tr 和td 替换为div 和相应的类：table 将是div id="table_replacer"，tr 将是div class="tr_replacer"，td 将是div class="td_replacer"（更改关闭显然也可以将标签添加到 div）

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

#table_replacerdisplay: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_replacerdisplay:table-cell;

希望这对某人有所帮助。

【讨论】：

恕我直言，这个解决方案相当于使用我尝试过的常规表格、tr、td 模式和样式 tr display: block;。问题：表格看起来不同，因为 td 元素没有呈现到表格宽度，而是在 tr 内浮动。意思是，所有行的 td 元素不再垂直对齐。

【参考方案22】：

您可以用

元素填充 元素，并为您喜欢的那些 div 应用任何边距。对于行之间的视觉空间，您可以在 元素上使用重复的背景图像。 （这是我今天刚刚使用的解决方案，它似乎在 IE6 和 FireFox 3 中都可以使用，尽管我没有进一步测试它。）

另外，如果您不愿意修改服务器代码以将

s 放入 s 中，您可以使用 jQuery（或类似的东西）将 内容动态包装在，使您可以根据需要应用 CSS。

【参考方案23】：

这是一个简单而优雅的解决方案，但有一些注意事项：

您实际上无法使间隙透明，您需要为它们赋予特定的颜色。 您不能将间隙上方和下方的边框转角 您需要知道表格单元格的内边距和边框

考虑到这一点，试试这个：

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 版本，或者创建垂直（列）间隙而不是行间隙。

这是一个代码笔，您可以在其中看到它的实际效果：https://codepen.io/anon/pen/agqPpW

【参考方案24】：

行间隙的外观可以通过在应该有下一个间隙的单元格上使用底部边框来实现，即border-bottom:solid white 5px;

这里是创建截图的代码：

<style>
table.class1 
    text-align:center;
    border-spacing:0 0px;
    font-family:Calibri, sans-serif;


table.class1 tr:first-child 
    background-color:#F8F8F8; /* header row color */


table.class1 tr > td 
    /* firefox has a problem rounding the bottom corners if the entire row is colored */
    /* hence the color is applied to each cell */
    background-color:#BDE5F8;


table.class1 th 
    border:solid #A6A6A6 1px;
    border-bottom-width:0px; /* otherwise borders are doubled-up */
    border-right-width:0px;
    padding:5px;


table.class1 th:first-child 
    border-radius: 5px 0 0 0;


table.class1 th.last 
    border-right-width:1px;
    border-radius: 0 5px 0 0;


/* round the bottom corners */
table.class1 tr:last-child > td:first-child 
    border-radius: 0 0 0 5px;


table.class1 tr:last-child > td:last-child 
    border-radius: 0 0 5px 0;


 /* put a line at the start of each new group */
td.newgroup 
    border-top:solid #AAA 1px;


/* this has to match the parent element background-color */
/* increase or decrease the amount of space by changing 5px */
td.endgroup 
    border-bottom:solid white 5px;


</style>

<table class="class1">
<tr><th>Group</th><th>Item</th><th class="last">Row</th></tr>
<tr><td class="newgroup endgroup">G-1</td><td class="newgroup endgroup">a1</td><td class="newgroup endgroup">1</td></tr>
<tr><td class="newgroup">G-2</td><td class="newgroup">b1</td><td class="newgroup">2</td></tr>
<tr><td>G-2</td><td>b2</td><td>3</td></tr>
<tr><td class="endgroup">G-2</td><td class="endgroup">b3</td><td class="endgroup">4</td></tr>
<tr><td class="newgroup">G-3</td><td class="newgroup">c1</td><td class="newgroup">5</td></tr>
<tr><td>G-3</td><td>c2</td><td>6</td></tr>
</table>

【参考方案25】：

这里运行顺利：

#myOwnTable td  padding: 6px 0 6px 0;

如果需要，我想你可以通过指定哪个 td 来制定更细粒度的布局。

【参考方案26】：

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

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

删除垂直列对齐，所以要小心你如何使用它

【参考方案27】：

你试过了吗：

tr.classname  margin-bottom:5em; 

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

td.classname  margin-bottom:5em; 

或

 td.classname  padding-bottom:5em; 

【讨论】：

这真的有效吗？我有div.el display: table-row; margin: 10px; ，margin 没有任何作用。我知道它与实际的桌子有点不同，但它不应该......

表格行/单元格没有边距。