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

98

.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>

展开摘要

我的问题是相对于HERECSS中标记的行。我发现行之间的距离太近了，因此我尝试添加底边距来分隔它们。不幸的是，它不起作用。我必须将页边距添加到表格单元格中以分隔行。

此行为背后的原因是什么？

另外，可以像我正在使用的那样使用此策略执行布局：

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

还是有更好的策略？

html css

— 斯特凡诺·波里尼（Stefano Borini）
source

如果要在行之间留出空间，请将padding-bottom添加到home_4。

— Satbir Kira

82

参见CSS 2.1标准，第17.5.3节。当您使用时display:table-row，DIV的高度完全取决于table-cell元素。因此，这些元素上的边距，填充和高度无效。

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

— 理财人才
source

30

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

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;
}

— 松饼人
source

14

尝试使用“透明”而不是“白色”作为颜色。

— Lendrick

即使没有表格塌陷，它也对我非常有效，只是为表格单元格添加透明边框！谢谢！

— 伊戈尔·拉斯洛

18

我所看到的最接近的东西是将其设置border-spacing: 0 30px;为容器div。但是，这只给我在桌子的上边缘留出空间，这违反了目的，因为您想让页边空白。

— 朱利安·林
source

1

另外，您可以尝试line-height

— Raheel Hasan 2014年

1

您可以使用删除顶部和底部的空格margin: -30px 0。

— Sanghyun Lee 2014年

在所有这些变通办法中，边界间距似乎是最语义的选择。谢谢！

— Pikamander2 '19

6

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

— 纳维主义者
source

不幸的是，那没有用。只有“填充”可以通过来影响div display: table。但是，这与保证金并不完全相同

— 朱利安·H·林

3

有一个非常简单的解决方法，border-spacing和border-collapseCSS属性适用于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;

否则它将无法正常工作。

— 克里斯·博伊德
source

这就像一个咒语，但是唯一的问题是，一旦我应用了border-separate，它就从行中删除了边框，我就在该行上使用border作为bottom-bottom：1px solid＃000，有什么想法吗？

— 阿巴斯

0

小提琴

 .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

这可以是另一个解决方案

— 穆罕默德·埃伦·叶纳（Mehmet Eren Yener）
source

0

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

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

.spacer {
    visibility: hidden
}

— 时髦的
source

0

Works-向表中添加间距

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

— 杰森
source

-2

在工作的div之间添加br标签。在display：table的父级的display：table-row的两个div之间添加br标签

— TeT Psy
source