Bei der Bootstrap-Klasse table-striped
hat jede zweite Zeile in meiner Tabelle eine Hintergrundfarbe von #F9F9F9
. Wie kann ich diese Farbe ändern?
css
twitter-bootstrap
html-table
drake035
quelle
quelle
Fügen Sie nach dem Laden von Bootstrap den folgenden CSS-Stil hinzu:
quelle
Wenn Sie Bootstrap 3 verwenden, können Sie die Florin-Methode oder eine benutzerdefinierte CSS-Datei verwenden.
Wenn Sie anstelle von verarbeiteten CSS-Dateien weniger Bootstrap-Quelle verwenden, können Sie diese direkt ändern
bootstrap/less/variables.less
.Finde so etwas wie:
quelle
Sie haben zwei Möglichkeiten: Entweder Sie überschreiben die Stile mit einem benutzerdefinierten Stylesheet oder Sie bearbeiten die Haupt-Bootstrap-CSS-Datei. Ich bevorzuge das erstere.
Ihre benutzerdefinierten Stile sollten nach dem Bootstrap verknüpft werden.
Im
custom.css
quelle
Passen Sie Ihr Bootstrap-CSS nicht an, indem Sie die Bootstrap-CSS-Datei direkt bearbeiten. Stattdessen empfehle ich, das Bootstrap-CSS zu kopieren und in einem anderen CSS-Ordner zu speichern. Dort können Sie die Stile an Ihre Bedürfnisse anpassen oder bearbeiten.
quelle
Verwenden Sie 'gerade' zum Ändern der Farbe von geraden Zeilen und 'ungerade' zum Ändern der Farbe von ungeraden Zeilen.
quelle
Tabellenstreifen löschen Es überschreibt Ihre Versuche, die Zeilenfarbe zu ändern.
Dann machen Sie dies in CSS
quelle
Ich fand dieses Schachbrettmuster (als Teilmenge des Zebrastreifens) eine angenehme Möglichkeit, eine zweispaltige Tabelle anzuzeigen. Dies wird mit WENIGER CSS geschrieben und gibt alle Farben von der Grundfarbe ab.
Beachten Sie, dass ich das fallen gelassen habe
.table-striped
, aber es scheint keine Rolle zu spielen.Sieht aus wie:
quelle
Bei Bootstrap 4 lautet die verantwortliche CSS-Konfiguration
bootstrap.css
für.table-striped
:Für eine sehr einfache Lösung habe ich es einfach in meine
custom.css
Datei kopiert und die Werte von geändertbackground-color
, sodass ich jetzt einen schickeren hellblauen Farbton habe:quelle
Wenn Sie die Farben tatsächlich umkehren möchten, sollten Sie eine Regel hinzufügen, die die "ungeraden" Zeilen weiß macht und die "geraden" Zeilen in der gewünschten Farbe erscheinen lässt.
quelle
Der einfachste Weg, um die Reihenfolge der Streifen zu ändern:
Fügen Sie leere
tr
vor Ihren Tabelle tr Tags hinzu.quelle