CSS table-layout:, warum gibt Tabelle-Zeile nicht akzeptieren, eine Marge?

CSS:

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

HTML:

<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 ist, relativ zu der markierten Zeile HERE in der CSS. Ich fand heraus, dass die Zeilen sind zu nahe beieinander, so ich versucht, um einen unteren Rand, um Sie zu trennen. Leider funktioniert es nicht. Ich muss hinzufügen, die Ränder um die Zellen der Tabelle zur Trennung der Zeilen.

Was ist der Grund hinter diesem Verhalten?

Auch, ist es ok, um diese Strategie verwenden, um durchzuführen Layout wie ich:

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

oder gibt es eine bessere Strategie?

Wenn Sie möchten, dass der Raum zwischen den Zeilen, hinzufügen von padding-bottom zu home_4.

InformationsquelleAutor Stefano Borini | 2010-01-02

css html

79

Finden Sie in der CSS 2.1-standard, Abschnitt 17.5.3. Wenn Sie display:table-row die Höhe des DIV ist allein bestimmt durch die Höhe der table-cell Elemente. So, margin, padding und height auf diese Elemente haben keine Wirkung.

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

InformationsquelleAutor richardtallent
28

Wie ist das für eine Arbeit um (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 explizit die Farbe von der Grenze (es sei denn, es gibt einen Weg, um das auch), aber das ist etwas, ich experimentiere mit einem Projekt meiner eigenen.

Bearbeiten enthalten Kommentare zu transparent:
```
tr.row {
    border-bottom: 30px solid transparent;
}
```
- Versuchen Sie 'transparent' statt 'weiß' ist die Farbe.
- Wow....perfekt! BTW, transparent funktioniert sehr gut
- Es funktioniert perfekt für mich, auch ohne Tabelle Zusammenbruch, nur um transparente Rand zur Tabelle-Zellen ! danke !
InformationsquelleAutor MuffinTheMan
16

Ist die nächste Sache, die ich gesehen habe wäre, um border-spacing: 0 30px; zu den div-container. Aber dieser lässt mich, mit dem Raum auf dem oberen Rand der Tabelle, die Niederlagen der Zweck, denn Sie wollte margin-bottom.
- Sie können auch versuchen line-height
- Sie können entfernen Sie die Leerzeichen oben und unten mit margin: -30px 0.
- Alle diese workarounds, border-spacing scheint, wie die meisten semantischen option. Danke!
InformationsquelleAutor Julian H. Lam
6

Haben Sie versucht, die Einstellung für den unteren Rand zu .row div, also Ihre "Zellen"?
Wenn Sie die Arbeit mit HTML-Tabellen, können Sie nicht einstellen, die Margen zu Reihen, zu - nur zu den Zellen.
- Leider, das hat nicht funktioniert. Nur "padding" kann Auswirkungen auf das div mit der display: table. Jedoch, das ist nicht ganz das gleiche wie Marge...
InformationsquelleAutor naivists

Gibt es eine ziemlich einfache Lösung für dieses Problem, die border-spacing und border-collapse CSS-Attribute auf display: table.

Können Sie die folgenden, um-Polsterung/Margen in Ihren Zellen.

CSS:

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

HTML:

<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 zu haben

border-collapse: separate;

Sonst funktioniert es nicht.

Dies funktioniert wie ein Charme, aber das problem ist nur, sobald ich mich bewerben Grenze trennen Sie entfernt die Grenze aus der Reihe, ich hatte die Grenze auf die Zeile border-bottom:1px solid #000, irgendeine Idee?

InformationsquelleAutor Kris Boyd

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

diese können eine andere Lösung

InformationsquelleAutor Mehmet Eren Yener

Hinzufügen spacer Spanne zwischen zwei Elementen, dann machen Sie es unsichtbar:

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

.spacer {
    visibility: hidden
}

InformationsquelleAutor funky-nd

0

Works - Add-Abstand Tabelle
```
#options table {
  border-spacing: 8px;
}
```
InformationsquelleAutor Jason
-2

hinzufügen eines br-Tags zwischen den divs gearbeitet. hinzufügen von br-Tags zwischen zwei divs, die display:table-row in der ein Elternteil mit display:table -

InformationsquelleAutor TeT Psy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.