So legen Sie den Abstand zwischen TBODY-Elementen fest

Ich habe einen Tisch wie diesen:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Ich möchte einen gewissen Abstand zwischen die einzelnen Elemente setzen, aber Polsterung und Rand haben keine Auswirkung. Irgendwelche Ideen?

Versuchen Sie dies, wenn es Ihnen nichts ausmacht, keine Grenzen zu haben.

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

So etwas funktioniert abhängig von den Anforderungen Ihres Browser-Supports:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

Die Leute werden immer kontroverse Meinungen über die Verwendung leerer Tabellenelemente zum Layout einer Seite haben (wie aus der Abwertung dieser Antwort hervorgeht). Ich erkenne das, aber manchmal ist es einfacher, sie so zu verwenden, wenn Sie " schnell und schmutzig " arbeiten.

Ich habe in früheren Projekten leere Zeilen verwendet, um Gruppen von Tabellenzeilen zu platzieren. Ich habe den Spacer-Zeilen eine eigene CSS-Klasse zugewiesen und eine Höhe für diese Klasse definiert, die als oberer und unterer Rand für diese Gruppe von Tabellenzeilen fungiert.

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

Wenn Ihre Tabellenzellen keine Ränder haben, können Sie auch eine Höhe für Ihre typische Zelle oder Zeile in Ihrem Stylesheet definieren, die alle Zeilen Ihrer Tabelle gleichmäßig verteilt.

tr{
   height: 40px;
}

Ich hatte Probleme, <tbody>mit ::beforePseudo richtig mehrere Abstände einzuhalten <tr>, da <td>ich in einigen Browsern mit Rowspan enthalten war .

Grundsätzlich, wenn Sie eine <tbody>solche Struktur haben:

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

Und Sie folgen, wer rät, CSS auf ::beforePseudo-Element wie dieses zu schreiben :

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

Dies wirkt sich auf den Zeilenbereich aus und führt dazu, dass die Tabelle innerhalb des zweiten Bereichs "verliert", <tr>wie viele <td>Zeilenbereiche im ersten vorhanden sind.

Wenn also jemand auf diese Art von Problem stößt, besteht die Lösung darin, ::beforePseudo folgendermaßen zu formatieren:

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

Hier ist eine Geige

Hier ist eine weitere Möglichkeit, die sich auf Folgendes stützt: Erstes Kind, das nicht in allen Browsern verfügbar ist:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Einfach einstellen displayals blockund es wird funktionieren.

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

Von allen oben gegebenen Antworten behalten nur die Antworten von djenson47 die Trennung von Präsentation und Inhalt bei . Der Nachteil der kollabierten Grenze Modell Methode ist , dass Sie nicht mehr die Tabellen verwenden Grenze oder Cellspacing Attribute die einzelnen Zellen zu trennen. Sie könnten argumentieren, dass dies eine gute Sache ist und es einige Problemumgehungen gibt, aber es kann ein Schmerz sein. Also ich denke das erste Kind Methode die eleganteste ist.

Alternativ können Sie auch die Überlaufeigenschaft Ihrer TBODY-Klasse auf etwas anderes als "sichtbar" setzen. Mit dieser Methode können Sie auch ein Modell mit getrennten Rändern beibehalten:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Da das Auffüllen auf TDs angewendet werden kann, können Sie einen Trick mit dem + -Zeichen ausführen. Dann ist es möglich, den TDs des ersten TR eines Körpers eine obere Polsterung zu geben:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

Ich habe "tbody + tbody" hinzugefügt, damit der erste tbody keine obere Polsterung hat. Es ist jedoch nicht erforderlich.

Soweit ich weiß gibt es keine Nachteile :), habe aber die älteren Browser nicht getestet.

Sie können border-spacingin einer Tabelle mit Tabellenzeilengruppen ein Leerzeichen zwischen diesen Gruppen hinzufügen. Ich glaube jedoch nicht, dass es eine Möglichkeit gibt, anzugeben, welche Gruppen voneinander beabstandet sind und welche nicht.

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

NEUE ANTWORT

Sie können beliebig viele <tbody>Tags verwenden. Ich wusste bis jetzt nicht, dass W3C das in Ordnung war. Um nicht zu sagen, dass meine unten stehende Lösung nicht funktioniert (es funktioniert), aber um das zu tun, was Sie versuchen, weisen Sie Ihre <tbody>Tag-Klassen zu und verweisen Sie dann <td>über CSS wie folgt auf ihre einzelnen Tags:

table tbody.yourClass td {
    padding: 10px;
}

und dein HTML also:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Probieren Sie diesen Kerl aus :)

ALTE ANTWORT

Was auch immer Sie tun, fügen Sie KEINE leeren Zeilen ein ...

Sie sollten nicht mehr als 1 tbody-Element in Ihrer Tabelle haben. Sie können das Klassen- oder ID-Attribut in Ihren <tr>Elementen festlegen und die entsprechenden <td>Tags auffüllen:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

Sie können den oberen und unteren sogar <tr>eine zusätzliche Klasse zuweisen, sodass sie nur die oberen bzw. unteren Polster ausführen:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

und in Ihrem HTML <tr>würde Ihr Tag so aussehen:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Hoffe das hilft!

Die Antwort von djensen47 funktioniert hervorragend für neuere Browser. Wie bereits erwähnt, funktioniert IE7 jedoch nicht.

Meine Problemumgehung für dieses Problem zur Unterstützung der älteren Browser bestand darin, den Inhalt jeder Zelle in ein div zu packen. Fügen Sie dann dem Div einen Rand nach oben hinzu.

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

Die Höheneinstellung hält die Zellen mindestens 30 Pixel hoch, um zu verhindern, dass die im div verwendeten Zellenfarben um den Text herum kollabieren. Der Rand oben schafft den gewünschten Platz, indem die gesamte Reihe höher gemacht wird.

Kam darüber hinweg, als ich versuchte, es selbst zu lösen. Ich hatte Erfolg damit, ein <br>Tag direkt vor das schließende </tbody>Tag zu setzen. Es ist eine rein visuelle Lösung, scheint aber auf den meisten von mir getesteten Browsern zu funktionieren.

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

Sollte auch zugänglich sein.