Tablo satırının arka plan rengini ayarlama

Question

Tüm sayfa boyunca uzanan bir tablom var.

Satırın background değerini ayarlamak içinkullanarak nth-child kullanarak zebra çiziyorum. Sorun şu ki, sadece satırları değil, sadece hücreleri boyamaktır. Renkli satırların her hücresi arasında beyaz boşluk görebilirsiniz. Sen background tüm satırdaki rengini değil, her bir hücre nasıl değiştiririm Bir örnek 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>

görebilirsiniz

?

Answer 1

aracılığıyla border-collapse CSS nitelik bir tablonun sınırları olup olmadığını belirler border-collapse:collapse

table eklemek ayrılmış veya çökmüş. Ayrılan modelde, bitişik hücreler 'un her birinin kendi ayrı sınırları vardır. Daraltılmış modelde, bitişik tabla hücreleri, sınırları paylaşır.

Ayrılan model, geleneksel HTML tablosu kenarlık modelidir. Bitişik hücrelerin her birinin kendi ayrı sınırları vardır. Kenar boşluklu alan tarafından verilen aralıklar . Daraltılmış kenarlık modelinde, bitişik tablo hücreleri kenarlıkları paylaşır. Bu model, modelinde, iç yapının sınır stili değeri oluk gibi davranır ve başlangıç, çıkıntı gibi davranır.

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

HTML'nize ekleyin:

<table cellspacing="0"> 

Veya CSS

table {border-spacing: 0;} 

Answer 3

bu CSS çözüm border-spacing ve border-collapse özelliklerini kullanır.

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

O tablolarda bu marj ve dolgu öncelikle cellspacing ve cellpadding özelliklere sahip HTML kontrol altına alındı ​​eskiden:

İşte güncellenen table kuralı, bu.

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

Ama bu nitelikler eskime bir yolda oldular. CSS'yi kullan.

Örnekler

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

td { 
    padding: 5px; 
} 

border-collapse bu makaleye bakın hakkında daha fazla bilgi edinmek için. Varsayılan olarak
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Answer 4

sınırları arasında bazı aralık mesafesi bir sınır süre için hücrelerin sınırlarını birleştirilecek

table { 
    border-collapse: collapse; 
} 

veya

table { 
    border-spacing: 0; 
} 

border-collapse: collapse

kullanmak kaldırmak için, orada border-spacing: 0, hücreler arasındaki boşluğu tek kenarlık olarak göstermek için alanı azaltacaktır. border-collapse'u kullanmayı tercih ediyorum çünkü amacı sınırları tek bir sınırla birleştirmek.