Wie fügt man in HTML vertikalen Abstand zwischen Tabellenzeilen hinzu?

Leerzeichentrennung in HTML-Tabellen: Ein umfassender Leitfaden

Als Webentwickler arbeiten wir oft mit Tabellen, um Daten strukturiert darzustellen. Es kann jedoch vorkommen, dass Sie eine zusätzliche vertikale Trennung zwischen Tabellenzeilen benötigen, die über das hinausgeht, was Browser normalerweise bieten. Kann dies mit CSS erreicht werden?

CSS für Tabellenzeilenabstand

Ein häufiges Missverständnis ist, dass die CSS-Eigenschaft border-spacing verwendet werden kann, um vertikalen Abstand zwischen Tabellen hinzuzufügen Reihen. Es passt zwar den Abstand zwischen den Tabellenzellen an, hat jedoch keinen Einfluss auf den vertikalen Abstand zwischen den Zeilen.

Lösung: Auffüllen zur Rettung

Um Platz zwischen Tabellenzeilen zu schaffen , liegt der Schlüssel im Anwenden von Auffüllungen auf einzelne Tabellenzellen (). Betrachten Sie den folgenden CSS-Code:

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

Die td-Elemente in tr-Zeilen, die die Klasse spaceUnder tragen, erhalten einen unteren Abstand von 1em, wodurch die Zeilen effektiv weiter auseinander gedrückt werden. Dadurch können Sie vertikale Abstände zwischen ausgewählten Zeilen erstellen und gleichzeitig eine saubere und organisierte Tabellenstruktur beibehalten.

Zusätzliche Überlegungen

Beachten Sie, dass diese Lösung nur für direkte untergeordnete Elemente von tr funktioniert Elemente. Dies ermöglicht die Erstellung verschachtelter Tabellen mit unterschiedlichen Abständen zwischen Abschnitten, wie im folgenden Code veranschaulicht:

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

Das obige ist der detaillierte Inhalt vonWie fügt man in HTML vertikalen Abstand zwischen Tabellenzeilen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!