Bootstrap table striped: jak zmienić kolor tła paska?

Dodaj następujący styl CSS po załadowaniu Bootstrap:

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

Masz dwie opcje, albo nadpisujesz Style za pomocą niestandardowego arkusza stylów, albo edytujesz główny plik css Bootstrap. Wolę to pierwsze.

Twoje niestandardowe style powinny być połączone po bootstrap.

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

W custom.css

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

Jeśli używasz Bootstrap 3, możesz użyć metody Florina lub użyć niestandardowego pliku CSS.

Jeśli używasz Bootstrap less source zamiast przetworzonych plików css, możesz je bezpośrednio zmienić w bootstrap/less/variables.less.

Znajdź coś w stylu:

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

Uznałem ten wzór szachownicy (jako podzbiór paska zebry) za przyjemny sposób wyświetlania tabeli dwukolumnowej. Jest to napisane przy użyciu mniej CSS, i klucze wszystkie kolory poza kolorem podstawowym.

@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%); }
}

Uwaga, upuściłem .table-striped, ale to chyba nie ma znaczenia.

Wygląda na:

Nie dostosowuj swojego Bootstrap CSS, edytując bezpośrednio plik Bootstrap CSS.Zamiast tego proponuję skopiować wklej Bootstrap CSS i zapisać je w innym folderze CSS i tam można dostosować lub edytować stylizacje odpowiednie do swoich potrzeb.

Jeśli chcesz odwrócić kolory, powinieneś dodać regułę, która sprawia, że" nieparzyste "wiersze są białe, a także sprawia, że" parzyste " wiersze mają dowolny kolor.

.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;
}

Użyj "parzyste" do zmiany koloru parzystych wierszy i użyj "nieparzyste" do zmiany koloru nieparzystych wierszy.