पंक्तियों पर पृष्ठभूमि रंग बदलें, लेकिन हेडर

Question

मैं सीएसएस का उपयोग कर एक मेज के पंक्तियों की पृष्ठभूमि का रंग बदलने की कोशिश कर रहा हूँ, लेकिन मैं एक मेज शीर्षक की पृष्ठभूमि को बदलने के लिए नहीं करना चाहती पंक्ति नहीं। हालांकि, डिफ़ॉल्ट रूप से, एक TH एक टीआर में लपेटा जाता है, इसलिए टीआर नियम मेरे TH को धक्का दिया जाता है।

यहाँ, साथ परीक्षण करने के लिए एक jsfiddle है अगर यह मदद करता है: http://jsfiddle.net/jomanlk/Bcayc/

Answer 1

आप <thead> और <tbody> डेटा पंक्तियों से अपने हेडर पंक्तियों differenciate को जोड़ सकते हैं। इस तरह आप केवल वांछित को लक्ष्य कर सकते:

table tbody td:hover{ 
    background: #f00; 
} 

table tbody tr:hover{ 
    background: #00f; 
}​ 

DEMO

निम्न मार्कअप के साथ साथ:

<table> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
      <th>Col 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Col 1</td> 
      <td>Col 2</td> 
      <td>Col 3</td> 
      <td>Col 4</td> 
     </tr> 
    </tbody> 
</table>​ 

Answer 2

लग रहा है सबसे अच्छा तरीका की तरह thead और tbody का उपयोग कर दिया गया है।

वैकल्पिक रूप से, एक अवधारणा के रूप में, आप एक वर्ग हैडर-टीआर को जोड़ सकते हैं, और .css में मंडराना हालत के बाद एक स्थिर पृष्ठभूमि रंग, जगह को परिभाषित

table td:hover{ 
    background: #f00; 
} 

table td:hover{ 
    background: #00f; 
} 

table .nohover:hover{ 
    background: #fff; 
} 

<table> 
    <tr class="nohover"> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td>Col 3</td> 
     <td>Col 4</td> 
    </tr> 
     <tr> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td>Col 3</td> 
     <td>Col 4</td> 
    </tr> 
</table>​ 

Answer 3

या हर दूसरी पंक्ति + मंडराना

tbody tr:nth-child(2n), tbody tr:hover{ 
    background-color: #e3e3e3; 
}