Füge dem Tabellenzeilen-Element <tr> einen unteren Rand hinzu.

Question

Ich habe eine Tabelle von 3 mal 3. Ich brauche eine Möglichkeit, einen Rand für den unteren Teil jeder Zeile tr hinzuzufügen und ihm eine spezifische Farbe zu geben.

Zuerst habe ich den direkten Weg ausprobiert, d.h.:

Aber das hat nicht funktioniert. Also habe ich CSS hinzugefügt wie folgt:

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

Aber das hat immer noch nicht funktioniert.

Ich würde es vorziehen, CSS zu verwenden, denn dann muss ich nicht jedem Zeile ein style Attribut hinzufügen. Ich habe kein border Attribut zur`

hinzugefügt. Ich hoffe, dass das meine CSS nicht beeinflusst.`

Answer 1

Fügen Sie border-collapse:collapse zu Ihrer Tabellenregel hinzu:

table { 
    border-collapse: collapse; 
}

Beispiel

table {
  border-collapse: collapse;
}

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

  A1B1C1
  A2B2C2
  A2B2C2

Link

Answer 2

Ich hatte schon einmal ein Problem wie dieses. Ich glaube nicht, dass tr direkt mit einer Rahmenformatierung versehen werden kann. Mein Workaround bestand darin, die tds in der Zeile zu formatieren:

CSS:

tr.border_bottom td {
  border-bottom: 1px solid black;
}

Answer 3

Verwenden border-collapse:collapse auf dem Tisch und border-bottom: 1 pt solid black; auf dem tr

Answer 4

Verwenden Sie

border-collapse:collapse wie Nathan geschrieben hat und Sie müssen festlegen

td { border-bottom: 1px solid #000; }

Answer 5

Es gibt viele unvollständige Antworten hier. Da Sie einen Rahmen nicht auf das tr-Tag anwenden können, müssen Sie es auf die td oder th Tags anwenden, wie folgt:

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

Wenn Sie dies tun, bleibt ein kleiner Abstand zwischen jedem td, was wahrscheinlich nicht wünschenswert ist, wenn Sie möchten, dass der Rahmen so aussieht, als ob es das tr-Tag wäre. Um die "Lücken zu füllen" sozusagen, müssen Sie die border-collapse-Eigenschaft auf dem table-Element verwenden und dessen Wert auf collapse setzen, wie folgt:

table {
  border-collapse: collapse;
}