CSS ile Alternate Row Oluşturma

CSS ile Farklı Görünen Satırlar Oluşturma

Table ya da ol - ul kullanarak hazırladığımız listelerin bir satırının farklı, diğer satırın farklı görünmesini istersek bu yöntemi kullanabiliriz. Kullanımı gayet basit olup yapılan şey tek numaralı (odd) satırlar için farklı bir stil, çift numaralı satırlar için farklı bir stil oluşturmaktır.

Örnek:

Yukarıdaki gibi bir liste (ul etiketi) oluşturmak için şu css kodlarını yazabiliriz:

li:nth-child(odd) { background-color:#eee; }

li:nth-child(even) { background-color:#fff; }

Aynı şeyi bir tablo için yapmak istersek de;

tr:nth-child(odd) { background-color:#eee; }

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

 

tablonun her satırını farklı yapma, tablo tek çift satırları farklı biçim yapma, liste tek çift her satırı farklı biçim yapma

KONU İLE İLGİLİ ÖRNEKLER

Tablonun Tek ve Çift Satırını Farklı Biçimlendirmek Kendin Dene

tr:nth-child(odd) { background-color:#eee; } /* tek numaralı satırlar */

tr:nth-child(even) { background-color:#fff; } /* çift numaralı satırlar */

Ol ve Ul - Tek ve Çift Satırları Farklı Biçimlendirme Kendin Dene

li:nth-child(odd) { background-color:#eee; } /* tek numaralı satırlar */

li:nth-child(even) { background-color:#fff; } /* çift numaralı satırlar */



YORUMLAR




8129  kez okundu.

Online Kullanıcı Sayısı 589



css-tek-cift-satir