Abstand zwischen zwei Zeilen in einer Tabelle?

Ist das über CSS möglich?

Ich versuche

tr.classname {
  border-spacing: 5em;
}

umsonst. Vielleicht mache ich etwas falsch?

Sie müssen Ihre tdElemente auffüllen . So etwas sollte den Trick machen. Sie können natürlich das gleiche Ergebnis erzielen, wenn Sie eine obere Polsterung anstelle einer unteren Polsterung verwenden.

Im folgenden CSS-Code bedeutet das Größer-als-Zeichen, dass das Auffüllen nur auf tdElemente angewendet wird , die den trElementen mit der Klasse direkt untergeordnet sind spaceUnder. Dadurch können verschachtelte Tabellen verwendet werden. (Zelle C und D im Beispielcode.) Ich bin mir nicht sicher, ob der Browser die direkte untergeordnete Auswahl unterstützt (denken Sie an IE 6), aber er sollte den Code in keinem modernen Browser beschädigen.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Dies sollte ungefähr so ​​aussehen:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

Versuchen Sie in der übergeordneten Tabelle die Einstellung

border-collapse:separate; 
border-spacing:5em;

Plus eine Grenzerklärung, und prüfen Sie, ob dies Ihren gewünschten Effekt erzielt. Beachten Sie jedoch, dass der IE das Modell der "getrennten Grenzen" nicht unterstützt.

Sie haben eine Tabelle mit ID-Alben mit beliebigen Daten ... Ich habe die trs und tds weggelassen

<table id="albums" cellspacing="0">       
</table>

In der CSS:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

Da ich ein Hintergrundbild hinter dem Tisch habe, würde es nicht funktionieren, es mit weißer Polsterung vorzutäuschen. Ich habe mich dafür entschieden, eine leere Zeile zwischen jede Inhaltszeile zu setzen:

<tr class="spacer"><td></td></tr>

Verwenden Sie dann CSS, um den Abstandsreihen eine bestimmte Höhe und einen transparenten Hintergrund zu geben.

Aus dem Mozilla Developer Network :

Die CSS-Eigenschaft für den Randabstand gibt den Abstand zwischen den Rändern benachbarter Zellen an (nur für das Modell mit getrennten Rändern). Dies entspricht dem Zellenabstandsattribut in HTML-Präsentationen. Ein optionaler zweiter Wert kann jedoch verwendet werden, um unterschiedliche horizontale und vertikale Abstände festzulegen .

Dieser letzte Teil wird oft übersehen. Beispiel:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

AKTUALISIEREN

Ich verstehe jetzt, dass das OP möchte, dass bestimmte, separate Zeilen einen größeren Abstand haben. Ich habe ein Setup mit tbodyElementen hinzugefügt , das dies erreicht, ohne die Semantik zu ruinieren. Ich bin mir jedoch nicht sicher, ob es von allen Browsern unterstützt wird. Ich habe es in Chrome gemacht.

Das folgende Beispiel zeigt, wie Sie es so aussehen lassen können, als ob die Tabelle aus separaten Zeilen und ausgewachsener CSS-Süße besteht. Auch gab die erste Reihe mehr Abstand mit dem tbodySetup. Fühlen Sie sich frei zu benutzen!

Support-Hinweis: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Sie können versuchen, eine Trennzeile hinzuzufügen:

html:

<tr class="separator" />

CSS:

table tr.separator { height: 10px; }

Sie können den Rand einer Tabellenzelle nicht ändern. Sie können jedoch die Polsterung ändern. Ändern Sie die Auffüllung des TD, wodurch die Zelle größer wird, und schieben Sie den Text mit der erhöhten Auffüllung von der Seite weg. Wenn Sie jedoch Grenzlinien haben, ist dies immer noch nicht genau das, was Sie möchten.

Sehen Sie sich das Border-Collapse an: separates Attribut (Standard) und die Border-Spacing- Eigenschaft.

Zuerst müssen Sie trennen sie mit border-collapse , dann können Sie die definieren Abstand zwischen den Spalten und Zeilen mit Grenzabstand .

Diese beiden CSS-Eigenschaften werden in jedem Browser gut unterstützt, siehe hier .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Ok, das kannst du machen

tr.classname td {background-color:red; border-bottom: 5em solid white}

Stellen Sie sicher, dass die Hintergrundfarbe auf dem td und nicht auf der Zeile eingestellt ist. Dies sollte in den meisten Browsern funktionieren ... (Chrome, dh & ff getestet)

Sie müssen border-collapse: separate;auf den Tisch setzen; Die meisten Standard-Stylesheets für Browser beginnen bei border-collapse: collapse;, wodurch der Randabstand verringert wird.

Auch Randabstand: geht auf die TD, nicht die TR.

Versuchen:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Sie können die Zeilenhöhe in der Tabelle verwenden:

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

Eine zu späte Antwort :)

Wenn Sie float auf trElemente anwenden , können Sie zwischen zwei Zeilen mit marginAttribut platzieren.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Um eine Illusion von Abständen zwischen Zeilen zu erzeugen, wenden Sie Hintergrundfarbe auf die Zeile an und erstellen Sie dann einen dicken Rand mit weißer Farbe, sodass ein "Leerzeichen" erstellt wird :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Der richtige Weg, um Abstände für Tabellen anzugeben, ist die Verwendung von Cellpadding und Cellspacing, z

<table cellpadding="4">

Ich bin darauf gestoßen, als ich mit einem ähnlichen Problem zu kämpfen hatte. Ich habe Varun Natraajs Antwort als sehr hilfreich empfunden, aber ich würde stattdessen einen transparenten Rand verwenden.

td { border: 1em solid transparent; }

Transparente Ränder haben noch Breite.

Funktioniert für die meisten neuesten Browser im Jahr 2015. Einfache Lösung. Es funktioniert nicht für transparent, aber im Gegensatz zu Thoronwens Antwort kann ich nicht transparent werden, um mit irgendeiner Größe zu rendern.

    tr {
      border-bottom:5em solid white;
    }

Einfach divin die tdund setzen Sie die folgenden Stile von div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Mir ist klar, dass dies eine Antwort auf einen alten Thread ist und möglicherweise nicht die angeforderte Lösung ist, aber obwohl alle vorgeschlagenen Lösungen nicht das taten, was ich brauchte, funktionierte diese Lösung für mich.

Ich hatte 2 Tabellenzellen, eine mit Hintergrundfarbe, die andere mit einer Randfarbe. Die obigen Lösungen entfernen den Rand, sodass die Zelle rechts in der Luft zu schweben scheint. Die Lösung, die den Trick tat , war das zu ersetzen table, trund tdmit divs und entsprechenden Klassen: Tabelle wäre div id="table_replacer", würde tr sein div class="tr_replacer"und td wäre div class="td_replacer"(ändern Tags zu divs als auch offensichtlich zu schließen)

Um die Lösung für mein Problem zu erhalten, lautet das CSS:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Hoffe das hilft jemandem.

Sie können die <td /> -Elemente mit <div /> -Elementen füllen und den gewünschten Divs einen beliebigen Rand zuweisen. Für einen visuellen Raum zwischen den Zeilen können Sie ein sich wiederholendes Hintergrundbild für das <tr /> -Element verwenden. (Dies war die Lösung, die ich heute verwendet habe, und sie scheint sowohl in IE6 als auch in FireFox 3 zu funktionieren, obwohl ich sie nicht weiter getestet habe.)

Wenn Sie es ablehnen, Ihren Servercode so zu ändern, dass <div /> s in die <td /> s eingefügt werden, können Sie mit jQuery (oder ähnlichem) den <td /> -Inhalt dynamisch in ein <div / einbinden >, damit Sie das CSS wie gewünscht anwenden können.

Oder fügen Sie einfach ein Leerzeichen mit der Höhe des Randes zwischen den Zeilen hinzu, für die Sie den Abstand hinzufügen möchten

Hier ist eine einfache und elegante Lösung mit ein paar Einschränkungen:

• Sie können die Lücken nicht wirklich transparent machen, sondern müssen ihnen eine bestimmte Farbe geben.
• Sie können die Ecken der Ränder über und unter den Lücken nicht abrunden
• Sie müssen den Abstand und die Ränder Ihrer Tabellenzellen kennen

Versuchen Sie in diesem Sinne Folgendes:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

Was Sie tatsächlich tun, ist, einen rechteckigen ::beforeBlock oben in alle Zellen in der Zeile einzufügen, denen eine Lücke vorangestellt werden soll. Diese Blöcke ragen etwas aus den Zellen heraus, um die vorhandenen Ränder zu überlappen und sie auszublenden. Diese Blöcke sind nur ein oberer und ein unterer Rand, die zusammengefügt sind: Der obere Rand bildet die Lücke, und der untere Rand erzeugt das Erscheinungsbild des ursprünglichen oberen Randes der Zellen.

Beachten Sie, dass Sie den horizontalen Rand Ihrer 'Blöcke' weiter vergrößern müssen, wenn Sie einen Rand um die Tabelle selbst sowie die Zellen haben. Für einen 4px-Tabellenrand würden Sie stattdessen Folgendes verwenden:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

Und wenn Ihre Tabelle border-collapse:separateanstelle von verwendet border-collapse:collapse, müssen Sie (a) die volle Breite des Tabellenrahmens verwenden:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... und auch (b) die doppelte Breite des Rahmens ersetzen, der jetzt unter der Lücke erscheinen muss:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

Die Technik lässt sich leicht an eine .gapafter-Version anpassen, wenn Sie dies bevorzugen, oder vertikale (Spalten-) Lücken anstelle von Zeilenlücken erstellen.

Hier ist ein Codepen, in dem Sie ihn in Aktion sehen können: https://codepen.io/anon/pen/agqPpW

Hier funktioniert das reibungslos:

#myOwnTable td { padding: 6px 0 6px 0;}

Ich nehme an, Sie könnten ein feinkörnigeres Layout erarbeiten, indem Sie angeben, welches td bei Bedarf erforderlich ist.

dies oben gezeigt ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

Entfernt die vertikale Spaltenausrichtung. Seien Sie also vorsichtig, wie Sie sie verwenden

Hast du es versucht:

tr.classname { margin-bottom:5em; }

Alternativ kann jeder td auch angepasst werden:

td.classname { margin-bottom:5em; }

oder

 td.classname { padding-bottom:5em; }