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

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!