Impostazione del colore di sfondo di una riga della tabella

Question

Ho una tabella che si estende su tutta la pagina.

I'm zebra striping using nth-child su tr 's per impostare il background della riga. Il problema è che si tratta solo di colorare le celle e non l'intera riga. Puoi vedere uno spazio bianco tra ogni cella delle righe colorate.

È possibile vedere un esempio here

table { 
 
    width: 100%; 
 
} 
 
tr:nth-child(even) { 
 
    background: peachpuff; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
      <td>0</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>5</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>6</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>7</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>8</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>9</td> 
 
      <td>0</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Come si fa a cambiare il colore del background l'intera riga e non ogni singola cellula?

Answer 1

aggiungere border-collapse:collapse a table

La proprietà CSS border-collapse determina se i bordi di una tabella sono separato o collassato. Nel modello separato, le celle adiacenti hanno ciascuna i propri bordi distinti. Nel modello compresso, le celle di tabella adiacenti condividono i bordi.

Il modello separato è il modello di bordo della tabella HTML tradizionale. Le celle adiacenti hanno ciascuna i loro bordi distinti. La distanza tra di loro data dalla proprietà di spaziatura del bordo.

Nel modello di bordo compresso, le celle della tabella adiacenti condividono i bordi. Nel modello , il valore di stile del bordo dell'inserto si comporta come il solco e l'inizio si comporta come la cresta.

table { 
 
    width: 100%; 
 
    border-collapse:collapse; 
 
} 
 
tr:nth-child(even) { 
 
    background: peachpuff; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
      <td>0</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>5</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>6</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>7</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>8</td> 
 
      <td>0</td> 
 
     </tr> 
 
     <tr> 
 
      <td>9</td> 
 
      <td>0</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

Aggiungi questo al vostro HTML:

<table cellspacing="0"> 

O tramite CSS

table {border-spacing: 0;} 

Answer 3

La soluzione CSS per questo utilizza le proprietà border-spacing e border-collapse.

Ecco la tua table regola, aggiornamento:

table { 
    width: 100%; 
    border-spacing: 0; 
    border-collapse: collapse; 
} 

Ha usato essere che margin e padding nelle tabelle sono state controllate in primo luogo nel codice HTML con gli attributi cellspacing e cellpadding.

<table border="1" cellpadding="5" cellspacing="10"> ... </table>

Ma questi attributi sono ora su un percorso di obsolescenza. Usa CSS.

Esempi

table { 
    border-collapse: separate; 
    border-spacing: 5px; 
} 

td { 
    padding: 5px; 
} 

Per saperne di più su border-collapse vedi questo articolo.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Answer 4

Per default v'è una certa distanza fra i bordi, per rimuovere utilizzare la spaziatura

table { 
    border-collapse: collapse; 
} 

o

table { 
    border-spacing: 0; 
} 

il border-collapse: collapse si fonderanno i bordi delle celle in una mentre confine border-spacing: 0 diminuirà lo spazio tra le celle per visualizzarlo come singolo bordo. Preferirò usare border-collapse perché il suo scopo è quello di unire i bordi in un singolo bordo.