CSS 表格布局：为什么表格行不接受边距？

Question

 .container { width: 850px; padding: 0; display: table; margin-left: auto; margin-right: auto; } .row { display: table-row; margin-bottom: 30px; /* HERE */ } .home_1 { width: 64px; height: 64px; padding-right: 20px; margin-right: 10px; display: table-cell; } .home_2 { width: 350px; height: 64px; padding: 0px; vertical-align: middle; font-size: 150%; display: table-cell; } .home_3 { width: 64px; height: 64px; padding-right: 20px; margin-right: 10px; display: table-cell; } .home_4 { width: 350px; height: 64px; padding: 0px; vertical-align: middle; font-size: 150%; display: table-cell; }

 <div class="container"> <div class="row"> <div class="home_1"></div> <div class="home_2"></div> <div class="home_3"></div> <div class="home_4"></div> </div> <div class="row"> <div class="home_1"></div> <div class="home_2"></div> </div> </div>

我的问题与 CSS 中标记为HERE的行有关。 我发现这些行彼此靠得太近，所以我试图添加一个底部边距来分隔它们。 不幸的是它不起作用。 我必须将边距添加到表格单元格以分隔行。

这种行为背后的原因是什么？

另外，是否可以像我一样使用此策略执行布局：

[icon] - text      [icon] - text
[icon] - text      [icon] - text

或者有更好的策略吗？

Answer 1

请参阅 CSS 2.1 标准，第 17.5.3 节。 当您使用display:table-row ，DIV 的高度仅由其中的table-cell元素的高度决定。 因此，这些元素的边距、填充和高度没有影响。

http://www.w3.org/TR/CSS2/tables.html

Answer 2

这如何解决（使用实际表格）？

table {
    border-collapse: collapse;
}

tr.row {
    border-bottom: solid white 30px; /* change "white" to your background color */
}

它不是那么动态，因为您必须明确设置边框的颜色（除非也有解决方法），但这是我在自己的项目中尝试的东西。

编辑以包含有关transparent评论：

tr.row {
    border-bottom: 30px solid transparent;
}

Answer 3

我见过的最接近的事情是设置border-spacing: 0 30px; 到容器div。 然而，这只会让我在桌子的上边缘留下空间，这违背了目的，因为你想要边距底部。

Answer 4

您是否尝试将底部边距设置为.row div ，即设置为您的“单元格”？ 当您使用实际的 HTML 表格时，您也不能为行设置边距 - 只能设置为单元格。

Answer 5

对此有一个非常简单的修复， border-spacing和border-collapse CSS 属性在display: table上工作。

您可以使用以下内容在您的单元格中获取填充/边距。

 .container { width: 850px; padding: 0; display: table; margin-left: auto; margin-right: auto; border-collapse: separate; border-spacing: 15px; } .row { display: table-row; } .home_1 { width: 64px; height: 64px; padding-right: 20px; margin-right: 10px; display: table-cell; } .home_2 { width: 350px; height: 64px; padding: 0px; vertical-align: middle; font-size: 150%; display: table-cell; } .home_3 { width: 64px; height: 64px; padding-right: 20px; margin-right: 10px; display: table-cell; } .home_4 { width: 350px; height: 64px; padding: 0px; vertical-align: middle; font-size: 150%; display: table-cell; }

 <div class="container"> <div class="row"> <div class="home_1">Foo</div> <div class="home_2">Foo</div> <div class="home_3">Foo</div> <div class="home_4">Foo</div> </div> <div class="row"> <div class="home_1">Foo</div> <div class="home_2">Foo</div> </div> </div>

请注意，您必须拥有

border-collapse: separate;

否则它将无法工作。

Answer 6

小提琴

 .row-seperator{
   border-top: solid transparent 50px;
 }

<table>
   <tr><td>Section 1</td></tr>
   <tr><td>row1 1</td></tr>
   <tr><td>row1 2</td></tr>
   <tr>
      <td class="row-seperator">Section 2</td>
   </tr>
   <tr><td>row2 1</td></tr>
   <tr><td>row2 2</td></tr>
</table>


#Outline
Section 1
row1 1
row1 2


Section 2
row2 1
row2 2

这可以是另一种解决方案

Answer 7

在两个元素之间添加间隔跨度，然后使其不可见：

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>

.spacer {
    visibility: hidden
}

Answer 8

作品 - 将间距添加到表格

#options table {
  border-spacing: 8px;
}

Answer 9

如果你想要一个特定的边距，例如 20px，你可以把表格放在一个 div 中。

<div id="tableDiv">
    <table>
      <tr>
        <th> test heading </th>
      </tr>
      <tr>
        <td> test data </td>
      </tr>
    </table>
</div>

因此，#tableDiv 的边距为 20px，但表格本身的宽度为 100%，强制表格为全宽，除了两边的边距。

#tableDiv {
  margin: 20px;
}

table {
  width: 100%;
}

Answer 10

在 div 之间添加 br 标签有效。 在两个 div 之间添加 br 标签，这些 div 是 display:table-row 父级中的 display:table