it-swarm.com.de

Wie wird der Abstand zwischen TBODY-Elementen gesetzt?

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 würde gerne etwas Abstand zwischen den einzelnen Körperelementen einfügen, aber das Auffüllen und der Rand haben keine Wirkung. Irgendwelche Ideen?

80
nickf

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>
49
Dave Jensen

Je nach den Anforderungen Ihres Browsers funktioniert etwas Ähnliches:

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

}
70
MacNimble

Die Leute haben immer kontroverse Meinungen über die Verwendung leerer Tabellenelemente für das Layout einer Seite (wie durch die Ablehnung dieser Antwort belegt wird). Ich erkenne das, aber manchmal ist es einfacher, sie auf diese Weise zu verwenden, wenn Sie " quick and dirty " 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 fungierte. 

    .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 Sie in Ihren Tabellenzellen keine Ränder haben, Sie können 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;
}
17
kevtrout

Ich hatte Probleme mit dem richtigen Abstand von mehreren <tbody> mit ::before Pseudo, in Anwesenheit von <tr>, der <td> mit Rowspan in einigen Browsern enthielt.

Grundsätzlich, wenn Sie einen <tbody> wie folgt strukturiert 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 ::before Pseudo-Element wie folgt zu schreiben:

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

Dies wirkt sich auf den Zeilenbereich aus, sodass die Tabelle innerhalb des zweiten <tr> "verliert", wie viele <td>- Zeilenbereiche im ersten Bereich vorhanden sind.

Wenn also jemand auf diese Art von Problemen stößt, lautet die Lösung, ::before-Pseudo auf diese Weise zu gestalten:

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

Hier ist eine Geige

7
Nineoclick

Setzen Sie einfach display als block und es wird funktionieren.

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

Eine weitere Möglichkeit, auf die Sie sich verlassen können: first-child, 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>
6
Dave Jensen

Da das Auffüllen auf TDs angewendet werden kann, können Sie mit dem + -Zeichen einen Trick 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 das "Tbody + Tbody" hinzugefügt, damit der erste Tbody keine Top-Polsterung hat. Es ist jedoch nicht erforderlich.

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

3
Maarten

Von allen oben genannten Antworten behalten nur die Antworten von djenson47 Trennung von Präsentation und Inhalt . Der Nachteil der Methode collapsed border model besteht darin, dass Sie die Attribute border oder cellspacing der Tabelle nicht mehr verwenden können, um die einzelnen Zellen zu trennen. Sie könnten argumentieren, dass dies eine gute Sache ist, und es gibt einige Problemumgehungen, aber es kann schmerzhaft sein. Ich denke also, dass die Methode first-child die eleganteste ist.

Alternativ können Sie die TBODY-Klasse 'overflow - Eigenschaft auf einen anderen Wert als "visible" setzen. Mit dieser Methode können Sie auch ein getrenntes Rahmenmodell 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>
3
Calvin

Sie können border-spacing in einer Tabelle mit Tabellenzeilengruppen verwenden, um ein Leerzeichen zwischen diesen Gruppen hinzuzufügen. Ich glaube jedoch nicht, dass es eine Möglichkeit gibt, festzulegen, welche Gruppen voneinander getrennt sind und welche nicht.

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

CSS

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

die Antwort von djensen47 funktioniert hervorragend für neuere Browser. Allerdings wurde darauf hingewiesen, dass IE7 nicht funktioniert.

Meine Problemumgehung für dieses Problem, um die älteren Browser zu unterstützen, bestand darin, den Inhalt der einzelnen Zellen in ein div zu packen. Dann fügen Sie dem div einen Rand 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 innerhalb des div verwendete Zellenfarben um den Text kollabieren. Die Randspitze erzeugt den gewünschten Raum, indem die gesamte Reihe höher wird.

0
Jereme Guenther

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

0
Ian

NEUE ANTWORT

Sie können beliebig viele <tbody>-Tags verwenden. Ich wusste nicht, dass das für W3C bis jetzt in Ordnung war. Um nicht zu sagen, dass meine untenstehende Lösung nicht funktioniert (sie funktioniert), aber um das zu tun, was Sie zu tun versuchen, ordnen Sie Ihre <tbody>-Tag-Klassen zu und referenzieren Sie ihre individuellen <td>-Tags über CSS wie folgt:

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 den Kerl aus :)

ALTE ANTWORT

was auch immer Sie tun, KEINE leeren Zeilen einfügen ...

sie sollten nicht mehr als ein Körperelement in Ihrer Tabelle haben. Sie können das class- 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 sogar dem oberen und dem unteren <tr> eine zusätzliche Klasse zuweisen, so dass nur die obere bzw. untere Auffüllung erfolgt:

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

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

und in Ihrem HTML-Code würde Ihr <tr>-Tag folgendermaßen 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!

0
Jason