Tabela Bootstrap w paski: Jak zmienić kolor tła w paski?

W przypadku klasy Bootstrap table-stripedco drugi wiersz w mojej tabeli ma kolor tła równy #F9F9F9. Jak mogę zmienić ten kolor?

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

zmień tę linię w bootstrap.css lub możesz użyć (nieparzysty) lub (parzysty) zamiast (2n + 1)

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
 }

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

Jeśli używasz źródła bez Bootstrap zamiast przetworzonych plików css, możesz je bezpośrednio zmienić w bootstrap/less/variables.less.

Znajdź coś takiego:

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

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

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

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

W custom.css

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

Nie dostosowuj swojego bootstrapowego CSS bezpośrednio edytując bootstrapowy plik CSS. Zamiast tego sugeruję skopiowanie wklejonego bootstrapowego CSS i zapisanie go w innym folderze CSS i tam możesz dostosować lub edytować style odpowiednie do twoich potrzeb.

.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 „even”, aby zmienić kolor parzystych rzędów, a „nieparzysty”, aby zmienić kolor nieparzystych wierszy.

Usuń paski tabeli Zastępuje próby zmiany koloru wiersza.

Następnie zrób to w css

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

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

    th {
       background-color: lightseagreen;
    }

Ten wzór szachownicy (jako podzbiór paska zebry) jest dla mnie przyjemnym sposobem na wyświetlenie tabeli z dwiema kolumnami. Jest to napisane przy użyciu LESS CSS i kluczem 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 nie ma to znaczenia.

Wygląda jak:

Z Bootstrap 4, odpowiedzialny konfiguracja w css bootstrap.cssza .table-stripedto:

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

Dla bardzo prostego rozwiązania po prostu skopiowałem go do swojego custom.csspliku i zmieniłem wartości background-color, dzięki czemu mam teraz bardziej wyszukany jasnoniebieski odcień:

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

Jeśli chcesz faktycznie odwrócić kolory, powinieneś dodać regułę, która sprawi, że „nieparzyste” rzędy będą białe, a także sprawi, że „parzyste” rzędy będą miały dowolny kolor.

Najłatwiejszy sposób na zmianę kolejności pasków:

Dodaj puste tr przed tagami tr tabeli.