पहली पंक्ति की कोशिकाओं पर शैली लागू करें

Question

यह बहुत सरल होना चाहिए लेकिन मैं इसका पता नहीं लगा सकता।

मेरे पास एक तालिका है:

<table class="category_table">
 <tr><td> blabla 1</td><td> blabla 2 </td></tr>
 <tr><td> blabla 3 </td><td> blabla 4 </td></tr>
</table>

मैं tdपहली trपंक्ति के टैग बनाना चाहता हूं vertical-align। लेकिन दूसरी पंक्ति नहीं।

.category_table td{
    vertical-align:top;
}

Comments

stackoverflow.com/questions/613284/…

— huMpty duMpty

हाँ, मैंने एक सवाल पूछने से पहले उस पृष्ठ को देखा है, यह काम नहीं कर रहा था।

— xperator

Answer 1

tr:first-childपहले लेने के लिए उपयोग करें tr:

.category_table tr:first-child td {
    vertical-align: top;
}

यदि आपके पास नेस्टेड टेबल हैं, और आप शैलियों को आंतरिक पंक्तियों में लागू नहीं करना चाहते हैं, तो कुछ बच्चे चयनकर्ताओं को जोड़ें ताकि tdपहले शीर्ष-स्तर में केवल शीर्ष-स्तर trकी शैलियों को प्राप्त करें:

.category_table > tbody > tr:first-child > td {
    vertical-align: top;
}

Comments

वास्तव में मैंने पहले यह कोशिश की थी, यह काम नहीं कर रहा है। यकीन नहीं है कि क्यों।

— xperator

मैं भी नहीं जानता। मुझे 100% विश्वास है कि यह सभी प्रमुख ब्राउज़रों के लिए काम करता है।

— BoltClock

जब मैं tdFireBug में पहली और दूसरी पंक्ति के टैग की तुलना करता हूं , तो मैं पहली पंक्ति को शैली में निहित देख सकता हूं लेकिन दूसरी पंक्ति में नहीं है। मुझे नहीं पता कि दूसरी पंक्ति लंबवत रूप से संरेखित क्यों है?

— xperator

तब यह शायद एक डिफ़ॉल्ट शैली है। मैं डिफ़ॉल्ट तालिका शैलियों से परिचित नहीं हूं।

— BoltClock

मैं फायरबग के साथ थोड़ा गहरा गया हूं। मुझे लगता है कि मुझे परेशानी पता चल गया है। वास्तव tdमें दूसरी पंक्ति के मेरे टैग के अंदर , मेरे पास वहां तालिका है। ऐसा लगता है कि दूसरी पंक्ति की कोशिकाओं के अंदर की तालिका शैली में निहित है।

— xperator

Answer 2

यह काम करना चाहिए:

.category_table tr:first-child td {
    vertical-align: top;
}

Answer 3

नीचे पहले trतालिका के लिए काम करता हैthead

table thead tr:first-child {
   background: #f2f2f2;
}

और यह पहले के लिए काम करता है trकी theadऔर tbodyदोनों:

table thead tbody tr:first-child {
   background: #f2f2f2;
}