Tabela de inicialização listrada: como altero a cor de fundo da faixa?

Com a classe Bootstrap table-striped, todas as outras linhas da minha tabela têm uma cor de plano de fundo igual a #F9F9F9. Como posso mudar essa cor?

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

altere esta linha no bootstrap.css ou você pode usar (ímpar) ou (par) em vez de (2n + 1)

Adicione o seguinte estilo CSS após carregar o 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
 }

Se você estiver usando o Bootstrap 3, poderá usar o método de Florin ou usar um arquivo CSS personalizado.

Se você usar menos código-fonte do Bootstrap em vez de arquivos css processados, poderá alterá-lo diretamente bootstrap/less/variables.less.

Encontre algo como:

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

Você tem duas opções: substitui os estilos por uma folha de estilo personalizada ou edita o arquivo css principal de inicialização. Eu prefiro o primeiro.

Seus estilos personalizados devem ser vinculados após a inicialização.

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

No custom.css

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

Não personalize o CSS do seu bootstrap editando diretamente o arquivo CSS do bootstrap. Em vez disso, sugiro copiar e colar o CSS do bootstrap e salvá-los em uma pasta CSS diferente, para que você possa personalizar ou editar estilos adequados às suas necessidades.

.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 alterar a cor das linhas pares e 'ímpar' para alterar a cor das linhas ímpares.

Excluir listrado de tabela É anular suas tentativas de alterar a cor da linha.

Então faça isso em css

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

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

    th {
       background-color: lightseagreen;
    }

Achei esse padrão quadriculado (como um subconjunto da faixa da zebra) uma maneira agradável de exibir uma tabela de duas colunas. Isso é escrito usando CSS MENOS e exclui todas as cores da cor 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%); }
}

Note que eu larguei o .table-striped, mas não parece importar.

Parece:

Com Bootstrap 4, a configuração css responsável bootstrap.csspara .table-stripedé:

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

Para uma solução muito simples, eu apenas a copiei no meu custom.cssarquivo e alterei os valores de background-color, para que agora eu tenha um tom azul claro mais sofisticado:

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

Se você realmente deseja reverter as cores, adicione uma regra que torne as linhas "ímpares" brancas, além de tornar as linhas "pares" a cor que desejar.

A maneira mais fácil de alterar a ordem das faixas:

Adicione tags vazias tr antes da tabela tr.