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
Freigeben: 2024-12-12 20:59:11
Original
225 Leute haben es durchsucht

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; 
}
Nach dem Login kopieren

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

tr {
  border-bottom: 1pt solid black;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage