CSS kullanarak alternatif tablo satırı rengi?

462

Bununla alternatif satır rengi olan bir tablo kullanıyorum.

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>

Snippet'i genişlet

Burada sınıf için kullanıyorum trama sadece için kullanmak istiyorum table. Tablo için sınıf kullandığımda bu tralternatif üzerinde geçerlidir .

HTML kodumu CSS kullanarak böyle yazabilir miyim?

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

CSS kullanarak satırların "zebra çizgileri" olmasını nasıl sağlayabilirim?

html css html-table

— Kali Charan Rajput
kaynak

1

Nth

— 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>

Snippet'i genişlet

Bir CSS seçici var, gerçekten bir çocuk seçici, nth-child olarak adlandırılıyor. Saf CSS'de aşağıdakileri yapabilirsiniz:

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

Not: IE 8'de destek yoktur.

Veya, jQuery'niz varsa:

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

— Russell Dias
kaynak

alternatif satırların köprü rengini değiştirmek de mümkündür. Çift sıra için farklı köprü rengi ve tek sıra için başka bir köprü rengi istiyorum. Thanks

— عثمان غني

4

Mükemmel cevap! Ancak sadece bilgi için kullanılabilecek başka bir CSS seçici vardır. tr:nth-of-type(odd/even)

— Nikhil Nanjappa

2

@ عثمانغني: Evet, sadece yapardıntr:nth-child(even) a

— Gerard

1

Html'nizi dinamik olarak yazarsanız çalışmaz. Daha sonra satırlara sınıf eklemeniz gerekir.

— erik

2019'da: Bu artık en iyi çözüm değil. Saf CSS kullanın .

— Chiramisu

158

Sen sahip :nth-child()sözde sınıfı:

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

İlk günlerinde :nth-child()onun tarayıcı desteği yoksulların nazikti. Bu yüzden ortam class="odd"bu kadar yaygın bir teknik haline geldi. 2013'ün sonlarında IE6 ve IE7'nin sonunda öldüğünü (veya bakımını durduracak kadar hasta olduğunu) söylemeye sevindim ama IE8 hala var - şükür ki, tek istisna bu.

— Álvaro González
kaynak

3

Başlığa CSS uygulamadığı için tercih edilen yanıt

— Mike

Merhaba bu birkaç yıl geç ama tıklandığında tablo satırına jqeury ile bir bg-renk ile seçilen bir sınıf eklemek hakkında. Ben fark ettim: jqeury ile "seçilen" bir sınıf eklediğinizde nth-child sözde sınıf bg-renk geçersiz kılar

— dutchkillsg 25:18

@dutchkillsg Bu cevabımın yorumundan ziyade yepyeni bir soru gibi görünüyor ...

— Álvaro González

"Zebra çizgileri" (yani dikey) için, sadece alışverişinde tr:nth-child(odd)ile td:nth-of-type(odd). Bu durumda, öğelere tddeğil , farklı bir sözde sınıf uyguladığınızı unutmayın tr.

— Chiramisu

36

Sadece html kodunuza (withing <head>) ekleyin ve bitirdiniz.

HTML:

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

JQuery örneklerinden daha kolay ve hızlı.

— bmich72
kaynak

Bu kabul edilen cevap olmalı. Javascript diğer konuları ele almak için kullanılabilirken, mümkün olduğunca CSS stilleri işlemelidir.

— Tormod Haugene

Günlük olarak html yapmıyorum. #cccbenim için geçerli bir renk kodu gibi görünmüyor. Açıklayabilir misin? Teşekkürler.

— tommy.carstensen

1

@ tommy.carstensen buna "kestirme onaltılık form" denir. Temel #cccolarak #cccccc, her RGB renginin onaltılı değere ccveya ondalık değerine 204(yani rgb(204, 204, 204)) sahip olduğu anlamına gelir . Bu konuda daha fazla bilgiyi buradan edinebilirsiniz -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

— Nick

Chrome Sürüm 78.0.3904.108

— IlludiumPu36

13

kullanım css ile böyle html yazabilir miyim?

Evet yapabilirsiniz, ancak :nth-child()sözde seçiciyi kullanmanız gerekecektir (sınırlı desteğe sahip olsa da):

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

— Sarfraz
kaynak

13

Alternatif satır renkleri için tek ve çift CSS kurallarını ve jQuery yöntemini kullanabiliriz

CSS Kullanımı

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

JQuery kullanma

$(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>

Snippet'i genişlet

— Santosh Khalse
kaynak

10

Yukarıdaki kodların çoğu IE sürümünde çalışmaz. IE + diğer tarayıcılar için çalışan çözüm budur.

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

— Sriwantha Attanayake
kaynak

9

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

— Pranay Rana
kaynak

46

Tamam jQuery bu sitede oldukça her yerde olduğunu biliyorum ama ne olursa olsun açıklama olmadan jQuery göndermek gerekir. Bu komut dosyası kendi kendine çalışmaz.

— DisgruntledGoat

4

Nth-child (tek / çift) seçicileri kullanabilirsiniz, ancak tüm tarayıcılar ( örn. 6-8, ff v3.0 ) bu kuralları desteklemez, bu nedenle çoğu çözüm neden sınıfları uyumlu olmayan tarayıcılar için kaplan şerit efekti elde etmek için satırlar.

— kırmızı kare
kaynak

3

PHP bunu yapmak için oldukça kolay bir yolu var, ben sorgunuzu anlamak, ben PHP kodlamak ve çıktı geliştirmek için CSS ve javascript kullandığınızı varsayalım.

Veritabanından gelen dinamik çıktı, daha sonra tabloya yüklenen sonuçları yinelemek için bir for döngüsü içerecektir. Bunun gibi bir işlev çağrısı ekleyin:

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

ardından işlevi sayfaya veya kitaplık dosyasına ekleyin:

function getbgc($trcount)
{

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

}

Şimdi bu, yeni oluşturulan her tablo satırındaki renkler arasında dinamik olarak değişecektir.

Tüm tarayıcılarda çalışmayan CSS ile uğraşmaktan çok daha kolay.

Bu yardımcı olur umarım.

— işaret
kaynak

teşekkürler @mark. Bu site PHP, .net veya basit HTML olacak düzeltmek değildir.

— Kali Charan Rajput