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

123

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?

drake035
fonte

Respostas:

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

Florim
fonte
100
Não faça isso. Da próxima vez que você atualizar o bootstrap, você perderá sua substituição personalizada. Muito melhor ter CSS personalizado em um arquivo separado, que você coloca diretamente após o bootstrap.css na cabeça.
Ben Thurley 8/08
Como você alteraria a cor de fundo para passar a linha inteira aqui?
Barry Michael Doyle
2
esta página explica como fazer isso por um hover [ stackoverflow.com/questions/15643037/…
Yvon Huynh
4
Esta foi a resposta que eu precisava, no entanto, eu a adicionei a um arquivo CSS separado, não ao CSS Bootstrap real. Está em cascata, portanto, se eu o adicionar após o bootstrap, ele funcionará perfeitamente e o manterá fora do bootstrap principal. Além disso, não preciso carregar meu próprio bootstrap modificado, apenas adiciono meu css a cada projeto que precisa disso.
Raddevus 06/04
Nunca altere diretamente nenhuma biblioteca de terceiros. Nunca! Basta substituir o estilo em seu próprio arquivo css.
Mehrdad
133

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
 }
kyriakos
fonte
funciona bem sobrescrevendo a cor padrão da tabela de inicialização. Obrigado.
euccas
Isso desabilita a classe "table-hover" em linhas pares ... existe uma correção?
exSnake
14

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;
Lucas S.
fonte
11

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;
}
Eisa Adil
fonte
Não funcionou para mim. A resposta de kyriakos funciona muito bem.
varagrawal
Este exemplo está faltando a tag tbody
kenecaswell
o> significa filho imediato; portanto, se houver uma tag tbody entre a tabela e tr, não funcionará. mas apenas remova o> e ele será válido para todos os tr em uma tabela especificada, independentemente de serem filhos imediatos ou não.
jumps4fun
3

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.


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

sammani anuththara
fonte
Isso desativa a classe de inicialização da tabela de foco, existe uma maneira de usar os dois?
Ex
3

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;
    }
David Morrow
fonte
2

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: insira a descrição da imagem aqui

John Lehmann
fonte
2

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);
}
Anna Costalonga
fonte
0

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.

PhPGuy
fonte
0

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

Adicione tags vazias tr antes da tabela tr.

Royal_MGH
fonte