Bootstrap table striped: ¿Cómo cambio el color de fondo de las rayas?

Con la clase Bootstrap table-striped, todas las demás filas de mi tabla tienen un color de fondo igual a #F9F9F9. ¿Cómo puedo cambiar este color?

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

cambie esta línea en bootstrap.css o podría usar (impar) o (par) en lugar de (2n + 1)

Agregue el siguiente estilo CSS después de cargar 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
 }

Si está usando Bootstrap 3, puede usar el método de Florin o usar un archivo CSS personalizado.

Si usa Bootstrap less source en lugar de archivos css procesados, puede cambiarlo directamente en formato bootstrap/less/variables.less.

Encuentra algo como:

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

Tiene dos opciones, o anula los estilos con una hoja de estilo personalizada o edita el archivo css de arranque principal. Prefiero el primero.

Sus estilos personalizados deben estar vinculados después de bootstrap.

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

En custom.css

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

No personalices tu CSS de arranque editando directamente el archivo CSS de arranque, en su lugar, sugiero copiar y pegar CSS de arranque y guardarlos en una carpeta CSS diferente y allí puedes personalizar o editar estilos que se adapten a tus necesidades.

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

Use 'par' para cambiar el color de las filas pares y use 'impar' para cambiar el color de las filas impares.

Eliminar rayado de tabla Anula sus intentos de cambiar el color de la fila.

Entonces haz esto en css

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

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

    th {
       background-color: lightseagreen;
    }

Encontré que este patrón de tablero de ajedrez (como un subconjunto de la raya de cebra) es una forma agradable de mostrar una tabla de dos columnas. Esto está escrito usando MENOS CSS y elimina todos los colores del color base.

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

Tenga en cuenta que he dejado caer el .table-striped, pero no parece importar.

Parece:

Con Bootstrap 4, la configuración css responsable en bootstrap.cssde .table-stripedes:

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

Para una solución muy simple, simplemente lo copié en mi custom.cssarchivo y cambié los valores de background-color, de modo que ahora tengo un tono azul claro más elegante:

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

Si realmente desea invertir los colores, debe agregar una regla que haga que las filas "impares" sean blancas, así como que las filas "pares" sean del color que desee.

La forma más sencilla de cambiar el orden de las rayas:

Agregue vacío tr antes de las etiquetas tr de la tabla.