Bootstrap-Tabelle gestreift: Wie ändere ich die Hintergrundfarbe des Streifens?

Bei der Bootstrap-Klasse table-stripedhat jede zweite Zeile in meiner Tabelle eine Hintergrundfarbe von #F9F9F9. Wie kann ich diese Farbe ändern?

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: red;
}

Ändern Sie diese Zeile in bootstrap.css oder verwenden Sie (ungerade) oder (gerade) anstelle von (2n + 1).

Fügen Sie nach dem Laden von Bootstrap den folgenden CSS-Stil hinzu:

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

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:

//** Background color used for `.table-striped`.
@table-bg-accent:               #f9f9f9;

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.

<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">

Im custom.css

.table-striped>tr:nth-child(odd){
   background-color:red;
}

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.

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #e08283;
  color: white;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
  background-color: #ECEFF1;
  color: white;
}

Verwenden Sie 'gerade' zum Ändern der Farbe von geraden Zeilen und 'ungerade' zum Ändern der Farbe von ungeraden Zeilen.

Tabellenstreifen löschen Es überschreibt Ihre Versuche, die Zeilenfarbe zu ändern.

Dann machen Sie dies in CSS

   tr:nth-child(odd) {
    background-color: lightskyblue;
    }

   tr:nth-child(even) {
    background-color: lightpink;
    }

    th {
       background-color: lightseagreen;
    }

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.

@base-color: #0000ff;
@row-color: lighten(@base-color, 40%);    
@other-row: darken(@row-color, 10%);

tbody {
    td:nth-child(odd) { width: 45%; }
    tr:nth-child(odd) > td:nth-child(odd) {
        background: darken(@row-color, 0%); }
    tr:nth-child(odd) > td:nth-child(even) {
        background: darken(@row-color, 7%); }
    tr:nth-child(even) > td:nth-child(odd) {
        background: darken(@other-row, 0%); }
    tr:nth-child(even) > td:nth-child(even) {
        background: darken(@other-row, 7%); }
}

Beachten Sie, dass ich das fallen gelassen habe .table-striped, aber es scheint keine Rolle zu spielen.

Sieht aus wie:

Bei Bootstrap 4 lautet die verantwortliche CSS-Konfiguration bootstrap.cssfür .table-striped:

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

Für eine sehr einfache Lösung habe ich es einfach in meine custom.cssDatei kopiert und die Werte von geändert background-color, sodass ich jetzt einen schickeren hellblauen Farbton habe:

.table-striped tbody tr:nth-of-type(odd) {
  background-color:  rgba(72, 113, 248, 0.068);
}

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.

Der einfachste Weg, um die Reihenfolge der Streifen zu ändern:

Fügen Sie leere tr vor Ihren Tabelle tr Tags hinzu.