2010-01-22 21 views
5

Tablo Yapım şu şekildedir:Tablo başlıkları için CSS, hatta tek satırlar?

<table> 
<thead> 
    <tr class="navigation"> 
    </tr> 
</thead> 
<thead> 
    <tr class="headers"> 
    </tr> 
</thead> 
<tbody> 
    <tr class="even"> 
    <td><a href="#"/></td> 
    </tr> 
    <tr class="odd"> 
    </tr> 
    </tr> 
</tbody> 
</table> 

Aşağıdaki CSS'yi tanımladım, CSS'mde "navigasyon", "başlık", "çift", "garip" sınıflar nasıl uygulanabilir? Bunlar, 'table.even', 'table.odd' gibi 'table' sınıfı ile nasıl tanımlanır? teşekkürler

table{ 
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
    font-size: 10px; 
    #margin: 45px; 
    width:100%; 
    text-align: left; 
    border-collapse: collapse; 
} 
+1

Böyle bir ilave '' ve aynı tabloda iki '' elemanlar olarak, HTML'nize birkaç hata var. Ayrıca CSS'nizde rastgele bir # var. Sanırım bunlar sadece kopyala-yapıştır hataları. ;) –

cevap

3

Sadece Ebeveyn elemanın sınıf veya üst öğesinin kendisini referans kullanmak. Örneğin, bu: yerine bu

.navigation { font-weight:bold } 

...: tarayıcı sayfasını oluşturduğunda

tr.navigation { font-weight:bold } 

Bu yükleme süresi aşağı kesecek.

Referans: Optimize browser rendering [Google Code]

+0

iyi bir fikirdir. – jhogendorn

1

aşağıdakileri yapmanız sağlar:

tr.navigation { font-weight:bold } 

Yani oluşturarak zebra: En TR Yani

element.className { rules } 

, aşağıdaki yapabileceğini senin oran ve olay satırlarda -stripes böyle yapılabilir:

Eğer elemanın birden fazla türü için sınıf adını kullanmak zorunda olmadığını
2

Eğer

table thead tr.navigation {} 
table thead tr.headers {} 
table tbody tr.even {} 
table tbody tr.odd {} 
+0

@devians, cevabım başına bu tamamen verimsiz. Tablo satırlarınız için .navigasyon kullanmak daha iyidir ve farklı bir stilde farklı stiller tanımlamanız gerekiyorsa, farklı bir sınıf adı kullanın. Bu küresel bir sınıftır% 100 olmadığı sürece gelecek Düzeltilebilirlik uğruna, en az tabloyu sınıflandırma ve miras hafif bir bit kullanmak için – jay

8

Daha basit ve sınıf ihtiyacım yok:

tbody tr:nth-child(odd) { 
    put your style here... 
} 

tbody tr:nth-child(even) { 
    put your style here... 
} 

Umarım yardım!

İlgili konular