Tabella bootstrap a strisce: come cambio il colore di sfondo delle strisce?

124

Con la classe Bootstrap table-striped, ogni altra riga nella mia tabella ha un colore di sfondo uguale a #F9F9F9. Come posso cambiare questo colore?

css twitter-bootstrap html-table

— drake035
fonte

116

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

cambia questa riga in bootstrap.css oppure potresti usare (dispari) o (pari) invece di (2n + 1)

— Fiorino
fonte

100

Non farlo. La prossima volta che aggiorni il bootstrap perderai il tuo override personalizzato. Molto meglio avere un CSS personalizzato in un file separato che metti direttamente dopo bootstrap.css in testa.

— Ben Thurley

Come cambieresti il colore di sfondo per passare il mouse sull'intera riga qui?

— Barry Michael Doyle

2

questa pagina spiega come farlo per un hover [ stackoverflow.com/questions/15643037/…

— Yvon Huynh

4

Questa era la risposta di cui avevo bisogno, tuttavia, l'ho aggiunta a un file CSS separato, non al vero Bootstrap CSS. È a cascata quindi se lo aggiungo dopo il bootstrap e funziona perfettamente e lo tiene fuori dal bootstrap principale. Inoltre non devo portare il mio bootstrap modificato, invece aggiungo semplicemente il mio css a ogni progetto che ne ha bisogno.

— raddevus

Non modificare mai direttamente alcuna libreria di terze parti. Mai! Basta sovrascrivere lo stile nel tuo file css.

— Mehrdad

133

Aggiungi il seguente stile CSS dopo aver caricato 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

funziona bene sovrascrivendo il colore predefinito della tabella di bootstrap. Grazie.

— eucche

Questo disabilita la classe "table-hover" su righe pari ... c'è una soluzione?

— exSnake

14

Se stai usando Bootstrap 3, puoi usare il metodo di Florin o usare un file CSS personalizzato.

Se usi Bootstrap meno sorgente invece di file CSS elaborati, puoi cambiarlo direttamente in bootstrap/less/variables.less.

Trova qualcosa come:

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

— Lucas S.
fonte

11

Hai due opzioni, o sovrascrivi gli stili con un foglio di stile personalizzato o modifichi il file css bootstrap principale. Preferisco il primo.

I tuoi stili personalizzati dovrebbero essere collegati dopo il bootstrap.

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

Nel custom.css

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

— Eisa Adil
fonte

Non ha funzionato per me. La risposta di kyriakos funziona davvero bene.

— varagrawal

In questo esempio manca il tag tbody

— kenecaswell,

il> significa figlio immediato, quindi se c'è un tag tbody tra table e tr, non funzionerà. ma basta rimuovere il>, e sarà valido per tutti i tr sotto una tabella specificata, indipendentemente dal fatto che siano figli immediati o meno.

— jumps4fun

3

Non personalizzare il tuo CSS bootstrap modificando direttamente il file CSS bootstrap, invece ti suggerisco di copiare e incollare i CSS bootstrap e salvarli in una cartella CSS diversa e lì puoi personalizzare o modificare lo stile adatto alle tue esigenze.

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

Usa "pari" per cambiare il colore delle righe pari e usa "dispari" per cambiare il colore delle righe dispari.

— sammani anuththara
fonte

Questo disabilita la classe table-hover di bootstrap, c'è un modo per usarli entrambi?

— exSnake

3

Elimina tabella a strisce Sovrascrive i tuoi tentativi di cambiare il colore delle righe.

Quindi fallo in css

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

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

    th {
       background-color: lightseagreen;
    }

— David Morrow
fonte

2

Ho trovato questo motivo a scacchiera (come sottoinsieme della striscia zebra) per essere un modo piacevole per visualizzare una tabella a due colonne. Questo è scritto usando MENO CSS e toglie tutti i colori dal colore di 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%); }
}

Nota che ho lasciato cadere il .table-striped, ma non sembra avere importanza.

Sembra: inserisci qui la descrizione dell'immagine

— John Lehmann
fonte

2

Con Bootstrap 4, la configurazione CSS responsabile bootstrap.cssper .table-stripedè:

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

Per una soluzione molto semplice, l'ho copiato nel mio custom.cssfile e ho cambiato i valori di background-color, in modo che ora ho una tonalità di azzurro più elaborata:

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

— Anna Costalonga
fonte

0

Se vuoi effettivamente invertire i colori, dovresti aggiungere una regola che renda bianche le righe "dispari" oltre a rendere le righe "pari" del colore che desideri.

— PhPGuy
fonte

0

Il modo più semplice per cambiare l'ordine delle strisce:

Aggiungi vuoto tr prima dei tag tr della tabella.

— Royal_MGH
fonte