CSS-Tabellenlayout: Warum akzeptiert die Tabellenzeile keinen Rand?

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

Meine Frage bezieht sich auf die HEREim CSS markierte Zeile . Ich fand heraus, dass die Zeilen zu nahe beieinander liegen, und versuchte, einen unteren Rand hinzuzufügen, um sie zu trennen. Geht leider nicht. Ich muss die Ränder zu den Tabellenzellen hinzufügen, um die Zeilen zu trennen.

Was ist der Grund für dieses Verhalten?

Ist es auch in Ordnung, diese Strategie zu verwenden, um das Layout wie folgt durchzuführen:

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

oder gibt es eine bessere strategie?

Siehe CSS 2.1-Standard, Abschnitt 17.5.3. Bei Verwendung display:table-rowwird die Höhe des DIV ausschließlich durch die Höhe der darin enthaltenen table-cellElemente bestimmt. Daher haben Rand, Polsterung und Höhe dieser Elemente keine Auswirkung.

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

Wie ist das für eine Umgehung (unter Verwendung einer tatsächlichen Tabelle)?

table {
    border-collapse: collapse;
}

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

Es ist nicht so dynamisch, da Sie die Farbe des Rahmens explizit festlegen müssen (es sei denn, es gibt auch einen Weg, dies zu umgehen), aber damit experimentiere ich in einem eigenen Projekt.

Bearbeiten , um Kommentare zu folgenden Themen aufzunehmen transparent:

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

Das nächste, was ich gesehen habe, wäre, border-spacing: 0 30px;auf den Container div zu setzen. Dies lässt mir jedoch nur Platz am oberen Rand des Tisches, was den Zweck zunichte macht, da Sie Rand-unten wollten.

Haben Sie versucht, den unteren Rand auf .row div"Ihre Zellen" einzustellen? Wenn Sie mit tatsächlichen HTML-Tabellen arbeiten, können Sie auch keine Zeilen für Zeilen festlegen - nur für Zellen.

Hierfür gibt es eine ziemlich einfache Lösung, an der die Attribute border-spacingund border-collapseCSS arbeiten display: table.

Sie können Folgendes verwenden, um Auffüllungen / Ränder in Ihren Zellen zu erhalten.

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

Beachten Sie, dass Sie haben müssen

border-collapse: separate;

Sonst funktioniert es nicht.

Geige

 .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

Dies kann eine andere Lösung sein

Fügen Sie eine Abstandsspanne zwischen zwei Elementen hinzu und machen Sie sie dann nicht sichtbar:

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

.spacer {
    visibility: hidden
}

Works - Abstand zur Tabelle hinzufügen

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

Das Hinzufügen eines br-Tags zwischen den Divs hat funktioniert. Fügen Sie ein br-Tag zwischen zwei divs hinzu, die angezeigt werden: table-row in einem übergeordneten Element mit display: table