Tabla Bootstrap rayas: ¿Cómo cambio el color de fondo de la raya?

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
 }

Tiene dos opciones, o bien sobrescribe los estilos con una hoja de estilos personalizada, o edita el archivo css principal de bootstrap. Prefiero el primero.

Sus estilos personalizados deben vincularse después de bootstrap.

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

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

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 bootstrap/less/variables.less.

Encuentra algo como:

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

Encontré este patrón de tablero de ajedrez (como un subconjunto de la franja de cebra) para ser una forma agradable de mostrar una tabla de dos columnas. Esto se escribe usando MENOS CSS, y las claves de todos los colores fuera 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 eliminado el .table-striped, pero no parece importar.

Parece:

No personalices tu CSS de bootstrap editando directamente el archivo CSS de bootstrap.En su lugar, sugiero copiar y pegar CSS de bootstrap y guardarlos en una carpeta CSS diferente y allí puede personalizar o editar estilos adecuados a sus necesidades.

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.

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