Ustawianie koloru tła wiersza tabeli

Question

Mam tabelę, która rozciąga się na całej stronie.

Jestem paskiem zebry przy użyciu nth-child na tr, aby ustawić background wiersza. Problem polega na tym, że koloruje tylko komórki, a nie cały rząd. Między każdą komórką kolorowych rzędów widać białą przestrzeń.

można zobaczyć przykład 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>

Jak zmienić kolor background całego rzędu i nie każda pojedyncza komórka?

Answer 1

dodać border-collapse:collapse do table

Właściwość CSS border-collapse określa, czy granice stole za są oddzielone lub zwinięte. W oddzielonym modelu każda z sąsiadujących komórek ma swoje własne wyraźne granice. W modelu zwiniętym sąsiadujące komórki tabeli współużytkują granice.

Oddzielony model jest tradycyjnym modelem obramowania tabeli HTML. Sąsiednie komórki mają swoje własne wyraźne granice. Odległość między nimi jest określona przez właściwość border-spacing.

W modelu zwiniętej krawędzi sąsiednie komórki tabeli współdzielą granice. W modelu ten styl obramowania wstawki zachowuje się jak rowek, a zdobienie zachowuje się jak grzbiet.

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

Dodaj to do kodu HTML:

<table cellspacing="0"> 

lub za pomocą CSS

table {border-spacing: 0;} 

Answer 3

Roztwór CSS używa border-spacing i border-collapse właściwości.

Oto reguła table, aktualizacja:

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

Kiedyś było tak, że margines i wyściółka w tabelach były kontrolowane głównie w HTML z cellspacing i cellpadding atrybutów.

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

Ale te atrybuty są teraz na drodze do dezaktualizacji. Użyj CSS.

Przykłady

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

td { 
    padding: 5px; 
} 

Aby dowiedzieć się więcej o border-collapse ten artykuł.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Answer 4

Domyślnie istnieje pewne odstępy między granicami, aby usunąć odstęp użyciu

table { 
    border-collapse: collapse; 
} 

lub

table { 
    border-spacing: 0; 
} 

w border-collapse: collapse połączy granic komórek w jednej chwili granicznej border-spacing: 0 zmniejszy odstęp między komórkami, aby pokazać go jako pojedynczą granicę. Wolę używać border-collapse, ponieważ jego celem jest scalenie granic w pojedynczą granicę.