Colore della riga della tabella alternativa utilizzando CSS?

462

Sto usando una tabella con colore di riga alternativo con questo.

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Espandi frammento

Qui sto usando class per tr, ma voglio usare solo per table. Quando uso la classe per la tabella, questo vale in tralternativa.

Posso scrivere il mio HTML in questo modo usando i CSS?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

Come posso fare in modo che le righe abbiano "strisce zebra" usando i CSS?

html css html-table

— Kali Charan Rajput
fonte

1

Ho creato una demo usando tutti i possibili schemi per nth-child () - xengravity.com/demo/nth-child

— xengravity

760

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

Espandi frammento

C'è un selettore CSS, in realtà uno pseudo-selettore, chiamato nth-child. Nel CSS puro puoi fare quanto segue:

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

Nota: nessun supporto in IE 8.

Oppure, se hai jQuery:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});

— Russell Dias
fonte

è possibile anche cambiare il colore del collegamento ipertestuale di righe alternative. Voglio un diverso colore del collegamento ipertestuale per la riga pari e un altro per il dispari. Grazie

— عثمان غني

4

Bella risposta! Ma solo per informazione c'è un altro selettore CSS che può essere usato, ad es. tr:nth-of-type(odd/even)

— Nikhil Nanjappa,

2

@ عثمانغني: Sì, lo faresti semplicementetr:nth-child(even) a

— Gerard,

1

Non funziona se scrivi l'html in modo dinamico. Quindi è necessario aggiungere classi alle righe.

— erik

Nel 2019: questa non è più la soluzione migliore. Usa CSS puro .

— Chiramisu,

158

Hai la :nth-child()pseudo-classe:

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

All'inizio del :nth-child()suo browser il supporto era piuttosto scarso. Ecco perché l'impostazione è class="odd"diventata una tecnica così comune. Alla fine del 2013 sono felice di dire che IE6 e IE7 sono finalmente morti (o abbastanza malati da smettere di prendersi cura), ma IE8 è ancora in circolazione - per fortuna, è l'unica eccezione.

— Álvaro González
fonte

3

Risposta preferita in quanto non si applica CSS all'intestazione

— Mike

Ciao, questo è in ritardo di un paio d'anni, ma che dire di aggiungere una classe selezionata con un colore bg con jqeury alla riga della tabella quando si fa clic. Ho notato che la pseudo classe b n-color: nth-child sovrascrive quando aggiungi una classe "selezionata" con jqeury

— dutchkillsg

@dutchkillsg Questa sembra essere una domanda nuova di zecca piuttosto che un commento alla mia risposta ...

— Álvaro González,

Per "strisce zebrate" (cioè verticali), basta scambiare tr:nth-child(odd)con td:nth-of-type(odd). Nota che in questo caso stai applicando una pseudo-classe diversa agli elementi tdanziché tr.

— Chiramisu,

36

Basta aggiungere quanto segue al codice HTML (all'interno del <head>) e il gioco è fatto.

HTML:

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

Più semplice e veloce degli esempi jQuery.

— bmich72
fonte

Questa dovrebbe essere la risposta accettata. Per quanto possibile, i CSS dovrebbero gestire lo stile, mentre javascript può essere usato per gestire altre questioni.

— Tormod Haugene,

Non faccio HTML ogni giorno. #cccnon mi sembra un codice colore valido. Puoi spiegare? Grazie.

— tommy.carstensen,

1

@ tommy.carstensen si chiama "forma esadecimale abbreviata". Fondamentalmente #cccviene espanso a #cccccc, il che significa che ogni colore RGB ha il valore esadecimale cco il valore decimale 204(cioè rgb(204, 204, 204)). Leggi di più qui -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

— Nick Grealy

Non funziona su Chrome Versione 78.0.3904.108

— IlludiumPu36

13

posso scrivere il mio HTML in questo modo con l'uso CSS?

Sì, puoi, ma dovrai usare lo :nth-child()pseudo-selettore (che ha comunque un supporto limitato):

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

— Sarfraz
fonte

13

Possiamo usare regole CSS pari e dispari e metodo jQuery per colori di riga alternativi

Utilizzando CSS

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

Utilizzando jQuery

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Espandi frammento

— Santosh Khalse
fonte

10

La maggior parte dei codici sopra non funzionerà con la versione IE. La soluzione che funziona con IE + altri browser è questa.

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

— Sriwantha Attanayake
fonte

9

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

— Pranay Rana
fonte

46

OK, so che jQuery è abbastanza onnipresente su questo sito, ma a prescindere non dovresti pubblicare jQuery senza spiegazioni. Questo script non funzionerà da solo.

— DisgruntledGoat

4

È possibile utilizzare i selettori nth-child (pari / dispari), tuttavia non tutti i browser ( ovvero 6-8, ff v3.0 ) supportano queste regole, quindi perché la maggior parte delle soluzioni ricade in qualche forma di soluzione javascript / jquery per aggiungere le classi al righe per questi browser non conformi per ottenere l'effetto striscia di tigre.

— redsquare
fonte

3

C'è un modo abbastanza semplice per farlo in PHP, se capisco la tua domanda, presumo che tu codice in PHP e stai usando CSS e javascript per migliorare l'output.

L'output dinamico dal database porterà un ciclo for per scorrere i risultati che vengono quindi caricati nella tabella. Basta aggiungere una chiamata di funzione come questa:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

quindi aggiungi la funzione al file della pagina o della libreria:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

Ora questo si alternerà dinamicamente tra i colori in ciascuna riga della tabella appena generata.

È molto più facile che scherzare con i CSS che non funzionano su tutti i browser.

Spero che sia di aiuto.

— marchio
fonte

grazie @mark. Non è corretto che il sito sarà in PHP, .net o HTML semplice.

— Kali Charan Rajput,