Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit CSS einen unteren Rand zu jeder Zeile einer Tabelle hinzufügen?

Wie kann ich mit CSS einen unteren Rand zu jeder Zeile einer Tabelle hinzufügen?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-12 20:59:11230Durchsuche

How Can I Add a Bottom Border to Each Row of a Table Using CSS?

Hinzufügen eines Rahmens zum unteren Rand jeder Tabellenzeile

Frage

Das Hinzufügen eines Rahmens zum unteren Rand jeder Tabellenzeile mithilfe von CSS scheint eine Herausforderung zu sein. Das direkte Stylen von tr-Elementen oder das Anwenden von CSS-Regeln auf tr führte nicht zum gewünschten Ergebnis. Gibt es eine bessere Möglichkeit, dies ohne Inline-Styling zu erreichen?

Lösung

Um mit CSS erfolgreich einen Rahmen am Ende jeder Tabellenzeile hinzuzufügen, können Sie die Eigenschaft border-collapse verwenden. Indem Sie diese Eigenschaft in der Tabellen-CSS-Regel auf „collapse“ setzen, verschmelzen die Tabellenränder miteinander.

table { 
    border-collapse: collapse; 
}

Dadurch können Sie dann einen Rahmenstil mithilfe der border-bottom-Eigenschaft in der tr-CSS-Regel anwenden.

tr {
  border-bottom: 1pt solid black;
}

Beispiel

Stellen Sie sich einen 3x3-Tisch vor:

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

Anwenden des CSS-Regeln führen zu einer Tabelle mit Rahmen nur am unteren Rand jeder Zeile:

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1pt solid black;
}

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS einen unteren Rand zu jeder Zeile einer Tabelle hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn