Come faccio a cambiare il colore di un tavolo a strisce in bootstrap?
Bootstrap fornisce diverse classi per creare tavoli in stile. Ad esempio, il “bordo del tavolo"La proprietà può essere utilizzata per creare una tabella con un bordo,"tavolo senza bordo"Per un tavolo senza confine,"tavolo-buio"Per un tavolo con un colore grigio scuro e altro ancora. Più specificamente, il "strisce di tavolo"È una di queste classi che crea un tavolo con un modello di striping zebra.
Questo articolo descriverà come cambiare il colore del tavolo a strisce in bootstrap.
Prerequisito: crea un tavolo a strisce in bootstrap
IL "strisce di tavolo"La classe crea un tavolo a strisce in bootstrap. Il tavolo a strisce si riferisce al tavolo con lo stripping zebra applicato alla riga del tavolo. Lo stripping zebra è specificato come "RGBA (0, 0, 0, .05)"Colore, ed è applicato sulle righe della tabella dispari. Tuttavia, usando CSS, puoi anche cambiare questo colore, che verrà coperto in seguito.
Esempio
Questo esempio dimostra come creare una tabella a strisce in bootstrap:
- Innanzitutto, aggiungi un "
"Tag che viene utilizzato per creare una tabella. Assegna il "tavolo" E "strisce di tavolo"Lezioni per il"
"Elemento per creare un tavolo a strisce.
- È costituito da due parti, intestazione e corpo, specificato usando il “" E ""Tag, rispettivamente.
- "
"Crea le righe della tabella. - "
"I tag specificano le intestazioni. - "
"I tag aggiungono i dati della tabella. Ecco il codice HTML:
S.NO Nome di battesimo Cognome Punto 1 Diana Oliver 90 2 Giacomo Liam 89 3 Lucas William 78 Produzione
Finora abbiamo visto come usare la classe bootstrap "strisce di tavolo"Per creare un tavolo a strisce. Ora, dirigiti verso la sezione successiva per cambiare il colore del tavolo a strisce usando CSS.
Come cambiare il colore di un tavolo a strisce in bootstrap?
Seguendo l'esempio in corso, scrivere il seguente codice nel file CSS:
.Striped Table> Tbody> TR: NTH-Child (ODD)> TD,
.STRIPED TABLE> Tbody> TR: nth-child (dispari)> th
Background-color: RGB (118, 187, 189);Secondo lo snippet di codice dato:
- Innanzitutto, menziona il nome di classe "strisce di tavolo". Quindi, accedi ai dati e alle intestazioni della tabella dispari in "" parte.
- IL "nth-child (N)"Il selettore viene utilizzato per selezionare l'ennesimo figlio del genitore in cui"N"Può essere qualsiasi formula o parola chiave come"Anche" O "strano".
- Infine, definisci il "colore di sfondo" usando il "rgb ()" funzione. Questo stile sovrascriverà il "strisce di tavolo"Lo stile di classe.
Produzione
In questo modo, puoi modificare il colore di un tavolo a strisce bootstrap.
Conclusione
Bootstrap "strisce di tavolo"La classe viene utilizzata per creare un tavolo a strisce. Ha uno stile CSS predefinito, "colore di sfondo"Proprietà con il valore"RGBA (0, 0, 0, .05)"Sul tavolo dispari delle righe del"" sezione. Tuttavia, è possibile regolare il colore del tavolo a strisce usando CSS. Questo post ha dimostrato il metodo per cambiare il colore di una tabella a strisce in bootstrap.
- « Come correggere l'errore git fatal non poteva leggere dal repository remoto?
- Come correggere Code Top 10 Error Windows ha interrotto questo dispositivo perché ha segnalato problemi? »
- È costituito da due parti, intestazione e corpo, specificato usando il “" E ""Tag, rispettivamente.