टीडी टैग के पहले स्तर पर शैली लागू करें

Question

क्या क्लास शैली को केवल एक स्तर के टीडी टैग पर लागू करने का कोई तरीका है?

<style>.MyClass td {border: solid 1px red;}</style> 

<table class="MyClass"> 
    <tr> 
    <td> 
     THIS SHOULD HAVE RED BORDERS 
    </td> 
    <td> 
     THIS SHOULD HAVE RED BORDERS 
     <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table> 
    </td> 
    </tr> 
</table> 

Answer 1

क्या क्लास शैली को केवल एक स्तर के टीडी टैग पर लागू करने का कोई तरीका है?

हाँ ^*:

.MyClass>tbody>tr>td { border: solid 1px red; } 

लेकिन! '>' डायरेक्ट-चाइल्ड सिलेक्टर आईई 6 में काम नहीं करता है। आपको लगता है कि ब्राउज़र का समर्थन करने के लिए की जरूरत है (जो आप शायद करते हैं, अफसोस), तुम सब कर सकते हैं आंतरिक तत्व को अलग से चयन किया जाता है और शैली अन-सेट:

.MyClass td { border: solid 1px red; } 
.MyClass td td { border: none; } 

---

^* ध्यान दें कि पहले उदाहरण संदर्भ tbody तत्व आपके HTML में नहीं मिला है। यह आपके एचटीएमएल में होना चाहिए, लेकिन ब्राउजर आमतौर पर इसे छोड़ने के साथ ठीक हैं ... वे इसे दृश्यों के पीछे में जोड़ते हैं।

Answer 2

मुझे लगता है कि आप

table tr td { color: red; } 
table tr td table tr td { color: black; } 

या

body table tr td { color: red; } 

जहां 'शरीर' अपनी मेज की मूल

के लिए एक चयनकर्ता है की कोशिश कर सकते लेकिन कक्षाएं सबसे अधिक संभावना सही तरीके से कर रहे हैं यहाँ जाने के लिए।

Answer 3

यह शैली:

table tr td { border: 1px solid red; } 
td table tr td { border: none; } 

मुझे देता है:

this http://img12.imageshack.us/img12/4477/borders.png

हालांकि, एक वर्ग का उपयोग कर शायद सही दृष्टिकोण यहाँ है।

Answer 4

बस MyClass के अंदर टेबल के लिए चयनकर्ता बनाएं।

.MyClass td {border: solid 1px red;} 
.MyClass table td {border: none} 

(सामान्य रूप से करने के लिए सभी आंतरिक तालिकाओं के लिए लागू होते हैं, आप भी table table td कर सकता है।)

Answer 5

कैसे सीएसएस का उपयोग कर के बारे में: पहली बच्चे छद्म वर्ग:

.MyClass td:first-child { border: solid 1px red; } 

Answer 6

मैं करना चाहता था तालिका के पहले कॉलम की चौड़ाई निर्धारित करें, और मैंने पाया कि यह काम करता है (एफएफ 7 में) - पहला कॉलम 50px चौड़ा है:

#MyTable>thead>tr>th:first-child { width:50px;} 

जहाँ मेरे मार्कअप

<table id="MyTable"> 
<thead> 
    <tr> 
    <th scope="col">Col1</th> 
    <th scope="col">Col2</th> 
    </tr> 
</thead> 
<tbody> 
    ... 
</tbody> 
</table> 

Answer 7

मुझे लगता है कि था, यह काम करेंगे।

.Myclass tr td:first-child{ } 

or 

.Myclass td:first-child { }