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

123

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

drake035
quelle

Antworten:

116
.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).

Gulden
quelle
100
Tu das nicht. Wenn Sie das nächste Mal Bootstrap aktualisieren, verlieren Sie Ihre benutzerdefinierte Überschreibung. Viel besser ist es, benutzerdefiniertes CSS in einer separaten Datei zu haben, die Sie direkt nach bootstrap.css in den Kopf einfügen.
Ben Thurley
Wie würden Sie die Hintergrundfarbe ändern, um hier die ganze Zeile zu schweben?
Barry Michael Doyle
2
Diese Seite erklärt, wie man es für einen Schwebeflug macht [ stackoverflow.com/questions/15643037/…
Yvon Huynh
4
Dies war die Antwort, die ich brauchte. Ich fügte sie jedoch einer separaten CSS-Datei hinzu, nicht dem eigentlichen Bootstrap-CSS. Es kaskadiert also, wenn ich es nach dem Bootstrap hinzufüge und es funktioniert perfekt und hält es aus dem Haupt-Bootstrap heraus. Außerdem muss ich keinen eigenen modifizierten Bootstrap tragen, sondern füge einfach mein CSS zu jedem Projekt hinzu, das dies benötigt.
Raddevus
Ändern Sie niemals eine Bibliothek eines Drittanbieters direkt. Noch nie! Überschreiben Sie einfach den Stil in Ihrer eigenen CSS-Datei.
Mehrdad
133

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
 }
kyriakos
quelle
funktioniert gut beim Überschreiben der Standardfarbe der Bootstrap-Tabelle. Danke dir.
Euccas
Dadurch wird die "table-hover" -Klasse in geraden Zeilen deaktiviert. Gibt es einen Fix?
ExSnake
14

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;
Lucas S.
quelle
11

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;
}
Eisa Adil
quelle
Hat bei mir nicht funktioniert. Die Antwort von kyriakos funktioniert wirklich gut.
Varagrawal
In diesem Beispiel fehlt das tbody-Tag
Kenecaswell
Das> bedeutet unmittelbares Kind. Wenn sich also zwischen table und tr ein tbody-Tag befindet, funktioniert es nicht. aber entfernen Sie einfach das>, und es gilt für alle tr unter einer angegebenen Tabelle, egal ob sie unmittelbare Kinder sind oder nicht.
jumps4fun
3

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

sammani anuththara
quelle
Dadurch wird die Table-Hover-Klasse von Bootstrap deaktiviert. Gibt es eine Möglichkeit, beide zu verwenden?
ExSnake
3

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;
    }
David Morrow
quelle
2

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: Geben Sie hier die Bildbeschreibung ein

John Lehmann
quelle
2

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);
}
Anna Costalonga
quelle
0

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.

PhPGuy
quelle
0

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

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

Royal_MGH
quelle