代码之家 › 专栏 › 技术社区 › Stefano Borini

CSS表格布局:为什么表格行不接受边距?

css html

Stefano Borini · 技术社区 · 16 年前

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

我的问题与所标的行有关 HERE 在CSS中。我发现行之间太近了,所以我试图添加一个下边距来分隔它们。不幸的是,它不起作用。我必须将页边距添加到表格单元格中以分隔行。

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

此外,是否可以像我所做的那样使用此策略执行布局:

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

还是有更好的策略?

8 回复 | 直到 7 年前

richardtallent 16 年前

见CSS 2.1标准第17.5.3节。当你使用 display:table-row ,DIV的高度完全由 table-cell 其中的元素。因此,这些元素的边距、填充和高度没有影响。

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

Vadim Ovchinnikov 7 年前

这对于一个工作区(使用一个实际的表)是怎样的?

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

Julian H. Lam 16 年前

我所看到的最接近的事情就是 border-spacing: 0 30px; 但是,对于容器分区,这只会在表的上边缘留下空间,这会破坏目的,因为您需要页边距底部。

naivists 16 年前

你试过把底边距设为 .row div 也就是你的“牢房”? 使用实际的HTML表时,不能将页边距设置为行,也不能仅设置为单元格。

Vadim Ovchinnikov 7 年前

有一个非常简单的解决方法,就是 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;

否则它将不起作用。

Mehmet Eren Yener 9 年前

Fiddle

 .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

这可能是另一个解决方案

funky-nd 7 年前

在两个元素之间添加间隔间距,然后使其不可见:

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

.spacer {
    visibility: hidden
}

-1

TeT Psy 8 年前

在已处理的div之间添加br标记。在显示为:table的父级中的两个div之间添加br标记