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

Sie können die box-shadow-Eigenschaft verwenden, um einen Rand eines tr-Elements zu simulieren. Passen Sie die Y-Position des box-shadow (hier als 2px dargestellt) an, um die Dicke anzupassen.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Answer 2

Ich habe versucht hinzuzufügen

    table {
      border-collapse: collapse;
    }   

zusammen mit dem

    tr {
      bottom-border: 2pt solid #color;
    }

und dann border-collapse auskommentiert, um zu sehen, was funktioniert. Für mich hat es gereicht, nur den tr-Selektor mit der bottom-border-Eigenschaft zu haben!

Kein Rahmen CSS Bsp.

Kein Rahmen Foto live

CSS Rahmen Bsp.

Tabelle mit Rahmen Foto live

Answer 3

Verwenden

tabelle{border-collapse:collapse}
zeile{border-top:dünn fest}

Ersetzen Sie "dünn fest" durch CSS-Eigenschaften.

Answer 4

Die Zeile als Block anzeigen.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

Und um abwechselnde Farben anzuzeigen einfach:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

Answer 5

Wenn Sie nicht möchten, dass

• das Zusammenfallen der Rahmen in der Tabelle erzwungen wird
• die TD-Elemente-Stilierung verwendet werden

Sie können den ::after Selektor verwenden, um Rahmen zu TR hinzuzufügen:

table tbody tr {
    position : relative; #um das ::after-Element innerhalb der Tabellen-Zeile zu enthalten
}

table tbody tr td {
    position : relative; #nötig, um einen z-Index anzuwenden
    z-Index : 2; #muss höher sein als der z-Index des tr::after-Elements
}

table tbody tr::after {
    content : '';
    position : absolute;
    z-Index : 1; #Fügen Sie einen z-Index unter dem z-Index von TD hinzu, damit Sie immer noch Daten aus Ihren Tabellenzeilen auswählen können :)
    top : 0px;
    left : 0px;
    width : 100%;
    height : 100%;
    border : 1px solid green; #Stilisieren Sie Ihren Rahmen hier, wählen Sie, ob Sie einen Rahmen unten, oben, links usw. wünschen ...
}

Es ist ein einfacher Trick, den ich in einem Szenario verwendet habe, in dem ich Abstände zwischen Tabellenzeilen setzen musste, sodass ich keinen Rahmenzusammenbruch in der Tabelle hinzufügen konnte, das Endergebnis:

Hoffe, es hilft :)