CSS का उपयोग करके किसी तालिका के केवल 2 कॉलम को कैसे बदला जाए

Question

केवल सीएसएस का उपयोग करना, मैं किसी तालिका के केवल 2 कॉलम के सीएसएस को कैसे ओवरराइड कर सकता हूं।

मैं सभी स्तंभों का उपयोग कर सकता हूं:

.countTable table table td

मैं इसे संशोधित करने के लिए इस पृष्ठ पर HTML में नहीं मिल सकता क्योंकि यह मेरी साइट नहीं है।

धन्यवाद।

Answer 1

आप :nth-childछद्म वर्ग का उपयोग इस तरह कर सकते हैं :

.countTable table table td:nth-child(2)

ध्यान दें, यह पुराने ब्राउज़रों (या IE) में काम नहीं करेगा, आपको उस मामले में कोशिकाओं को क्लास देने या जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी।

Comments

यह प्रत्येक तालिका में केवल दूसरा सेल देगा, प्रत्येक पंक्ति में दूसरा सेल नहीं। आप की जरूरत है। उचित टेबल टेबल tr td: nth-child (2)

— Deeksy

@ डिक्सी - यह सही नहीं है, यह परवाह नहीं करता है कि चयनकर्ता क्या है। nth-childतत्व को खोजने के बाद लागू किया जाता है, और इसकी nthतुलना उसके माता-पिता से की जाती है, चाहे वह चयनकर्ता में हो या न हो। : आप इस यहाँ काम देख सकते हैं jsfiddle.net/JQQPz

— निक Craver

td के अंदर किसी तत्व के केवल css को बदलने के बारे में: nth-child (2)। जैसे <a> टैग। क्या यह td हो रहा है: nth-child (2) {}?

— इवो ​​सैन

@ हाथीदांत-संतोस बस aअंत में td:nth-child(2) aजोड़ता है , उदाहरण के लिए उस तत्व के नीचे शैली लिंक।

— निक Craver

आपके पास दो बार तालिका क्यों है (नीचे अन्य उत्तरों के विपरीत)?

— उल्फी

Answer 2

इसे इस्तेमाल करे:

.countTable table tr td:first-child + td

आप अन्य कॉलमों को शैली देने के लिए भी दोहरा सकते हैं:

.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */

Comments

मैंने इसके लिए एक ऐसी स्थिति का विकल्प चुना जिसमें साइट के मालिक कोड को बनाए रखने वाले डेवलपर नहीं थे और इससे उन्हें अपने डेटा टेबलों में कॉलम के अलाइनमेंट को बहुत ही सीधे तरीके से बदलने की सुविधा मिली, हालांकि थोड़ा वर्बोज़, कमेंट के साथ आप यहां हैं, उनके लिए यह जानना आसान हो गया है कि कौन सा चयनकर्ता ब्लॉक बाएं से किस कॉलम के लिए था। फिर से सबसे सुंदर और कुशल तरीका नहीं है, लेकिन यह काम किया!

— एरिक बिशार्ड

Answer 3

तालिका के केवल दूसरे कॉलम को बदलने के लिए निम्नलिखित का उपयोग करें:

सामान्य मामला:

table td + td{  /* this will go to the 2nd column of a table directly */

background:red

}

आपका मुकदमा:

.countTable table table td + td{ 

background: red

}

नोट: यह सभी ब्राउज़रों (आधुनिक और पुराने) के लिए काम करता है यही कारण है कि मैंने एक पुराने प्रश्न के लिए अपना उत्तर जोड़ा है

Comments

सिर्फ पहले कॉलम को चुनने के लिए ट्विक क्या होगा? तालिका td {...} का उपयोग करके अन्य स्तंभों में भी सभी कक्षों का चयन करता है।

— j4v1

@ j4v1 टेबल td {बैकग्राउंड: रेड;} // फर्स्ट कॉलम में रेड बैकग्राउंड टेबल td + td + बैकग्राउंड: ब्लू;} // बाकी का ब्लू होगा

— Abzoozy

Answer 4

आप दूसरे कॉलम में प्रत्येक सेल के लिए एक वर्ग नामित कर सकते हैं।

<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>

Comments

मैं इसका उपयोग नहीं कर सकता। जैसा मैंने कहा, यह मेरा पृष्ठ नहीं है और इसलिए, मैं html को नहीं बदल सकता।

@ चुनिंदा का उपयोग करने के मौजूदा तरीके की तुलना में, यह एक अच्छा तरीका नहीं है।

— PM

Answer 5

इस वेब पर http://quirksmode.org/css/css2/columns.html मुझे वह आसान तरीका मिला

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..

Comments

उन्होंने कहा कि वह HTML को संशोधित नहीं कर सकते।

— फ्रूंगी