Warum wird der untere Rand meiner Tabellenzeile bei Verwendung von CSS nicht angezeigt?

So fügen Sie Ränder am Ende von Tabellenzeilen hinzu

Sie haben eine 3x3-Tabelle und möchten am Ende jeder Zeile einen Rahmen hinzufügen. Sie haben versucht, das Stilattribut direkt zum -Attribut hinzuzufügen. Elemente, aber das hat nicht funktioniert. Sie haben dann CSS wie folgt hinzugefügt:

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

Aber das hat immer noch nicht funktioniert. Sie bevorzugen die Verwendung von CSS, sodass Sie nicht jeder Zeile ein Stilattribut hinzufügen müssen.

Das Problem besteht darin, dass Sie „border-collapse:collapse“ nicht zu Ihrer Tabellenregel hinzugefügt haben. Diese Eigenschaft weist den Browser an, die Ränder benachbarter Zellen auszublenden. Ohne sie werden die Ränder übereinander gezeichnet, sodass die Linien schwer zu erkennen sind.

Um das Problem zu beheben, fügen Sie border-collapse:collapse zu Ihrer Tabellenregel hinzu:

table {
border-collapse: collapse;
}

Hier ist ein Beispiel:

table {
border-collapse: collapse;
}

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

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

Dadurch wird am unteren Rand jeder Zeile in Ihrem ein 1pt schwarzer Rand hinzugefügt Tabelle.

Das obige ist der detaillierte Inhalt vonWarum wird der untere Rand meiner Tabellenzeile bei Verwendung von CSS nicht angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!