क्या मैं व्यक्तिगत कोशिकाओं को रंग दिए बिना सीएसएस का उपयोग करके टेबल कॉलम को रंग सकता हूं?

Question

क्या सभी तरह से स्तंभों के स्पैन को रंगने का एक तरीका है। नीचे उदाहरण देखें, देखें:

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

और मैं रंग के लिए एक बेहतर तरीका (कम कोड, गैर-व्यक्तिगत रंग) की तलाश कर रहा हूं, उदाहरण के लिए, "इंजन" और "बॉडी" स्पैन, जिसमें सभी कोशिकाएं उनके नीचे हैं #DDD

<style>
  .color {
    background-color: #DDD
  }
</style>
<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>

Comments

@zipzit: यदि आपको वास्तव में तालिका की आवश्यकता है तो तालिकाओं में कुछ भी गलत नहीं है - यदि डेटा प्रकृति में सारणीबद्ध है (जैसे कीमतों के साथ उत्पादों की तालिका)। तालिकाओं की आलोचना उन्हें एक लेआउट टूल के रूप में उपयोग करने के खिलाफ है।

— सालेस्के

आश्चर्य है कि इसने हॉट नेटवर्क प्रश्नों को कैसे दर्ज किया

— श्री एलियन

यह कल पूछा गया था और अभी के रूप में, क्यू पर 24 upvotes है और 43 ए पर, और स्वीकृत उत्तर था और अभी भी पागल की तरह उखाड़ा जा रहा है

— डेनिस

लोग उन चीजों को सीखना पसंद करते हैं जिन्हें वे नहीं जानते थे, चाहे वह jQuery नंबर पार्सिंग की एक प्रलेखित ख़ासियत हो, या एक HTML टैग / अवधारणा जो साफ-सुथरी चीजें करती हो, वे :) के बारे में नहीं जानते थे

— Dennis

@canon हे, वैसे भी सभ्य जवाब ...

— श्री एलियन

Answer 1

हां, आप ... <col>तत्व का उपयोग कर सकते हैं :

.grey {
  background-color: rgba(128,128,128,.25);
}
.red {
  background-color: rgba(255,0,0,.25);
}
.blue {
  background-color: rgba(0,0,255,.25);
}

<table>
  <colgroup>
    <col class="grey" />
    <col class="red" span="3" />
    <col class="blue" />
  </colgroup>
  <thead>
    <tr>
      <th>#</th>
      <th colspan="3">color 1</th>
      <th>color 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>
      <td>blue</td>
    </tr>
    <tr>
      <th>2</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>      
      <td>blue</td>
    </tr>
  </tbody>
</table>

_{नोट : आप spanकॉल परिभाषा को एक से अधिक कॉलम पर लागू करने के लिए विशेषता का उपयोग कर सकते हैं ।
यह भी देखें :<colgroup>}

Comments

ध्यान दें कि आपको <col span="3" />फैले हुए स्तंभों की आवश्यकता होगी ।

— नीट द डार्क एबसोल

यह colgroupसभी स्तंभों वाले एक का उपयोग करने के लिए व्यर्थ है ।

— जुक्का के। कोर्पेला

@ JukkaK.Korpela इसकी परवाह किए बिना कि क्या आप इसे निर्दिष्ट करते हैं या नहीं, यह इस तरह से पार्स हो जाता है <tbody>। मैं केवल निर्दिष्ट करना पसंद करता हूं।

— कैनन

मैं देख रहा हूं कि colटैग का उपयोग आम नहीं है, लेकिन मैं इसका उपयोग हमेशा कॉलम की चौड़ाई

— कोएन के

यदि कोई अन्य व्यक्ति उत्सुक है कि यह क्यों काम करता है, या कौन से सीएसएस गुणों का उपयोग कॉलम पर किया जा सकता है, तो सीएसएस 2.1 कल्पना के प्रासंगिक खंड 17.3 और 17.5.1 हैं ।

— मेरिटॉन

Answer 2

आप उसके लिए nth-childचयनकर्ता का उपयोग कर सकते हैं :

tr td:nth-child(2),
tr td:nth-child(3) {
  background: #ccc;
}

<table>
  <tr>
    <th colspan="2">headline 1</th>
    <th>headline 2</th>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
</table>

Comments

colखुद को स्टाइल करना इस तरह से बेहतर है (क्लीनर और तेज)।

— tomasz86

Answer 3

यह आम तौर पर स्टाइल सेल (यदि वांछित हो तो कॉलम) के लिए सबसे सरल है, लेकिन कॉलम को अलग-अलग तरीकों से स्टाइल किया जा सकता है। एक सरल तरीका एक colgroupतत्व में कॉलम लपेटना और उस पर शैलियों को सेट करना है। उदाहरण:

<style>
.x {
    background-color: #DDD
}
</style>
<table border="1">
<col>
<colgroup class=x>
  <col>
  <col>
  <col>
</colgroup>
<col>
<colgroup class=x>
  <col>
  <col>
</colgroup>
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>

Comments

अलग-अलग हैं colअंदर तत्वों colgroupरों अलग-अलग स्टाइल किया जा की जरूरत नहीं है, आप भी सेट कर सकते हैं spanपर विशेषता colgroupही - <colgroup span="2">- बजाय रखने का colयह अंदर तत्वों।

— मिस्टरमैनसम

Answer 4

आप CSS3: http://jsfiddle.net/snuggles08/bm98g8v8/ का उपयोग कर सकते हैं

<style>
  .table td:nth-of-type(1) {
    background: red;
  }
  .table td:nth-of-type(5) {
    background: blue;
  }
  .table td:nth-of-type(3) {
    background: green;
  }
  .table td:nth-of-type(7) {
    background: lime;
  }
  .table td:nth-of-type(2) {
    background: skyblue;
  }
  .table td:nth-of-type(4) {
    background: darkred;
  }
  .table td:nth-of-type(6) {
    background: navy;
  }
</style>
Styled table:
<table border="1" class="table">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
<hr>Unstyled table:
<table border="1" class="table2">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

Answer 5

मैं इसके लिए nth-childसीएसएस छद्म वर्ग का उपयोग करूंगा :

tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7){
    background-color: #DDD;
}

tr td:nth-child(2),
tr th:nth-child(2),
tr td:nth-child(3),
tr td:nth-child(4),
tr th:nth-child(4),
tr td:nth-child(6),
tr td:nth-child(7) {
  background-color: #DDD;
}

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Answer 6

निम्नलिखित कार्यान्वयन nth-child चयनकर्ता है और उसे काम करना चाहिए ...

<style type="text/css">
    th:nth-child(2),
    th:nth-child(4)
    {
        background-color: rgba(255, 0, 0, 1.0);
    }

    td:nth-child(2), 
    td:nth-child(3),
    td:nth-child(4),
    td:nth-child(6),
    td:nth-child(7)
    {
        background-color: rgba(255, 0, 0, 0.5);
    }
</style>

Comments

आप शायद एक >tr और td के बीच चाहते हैं , जब से आप केवल ts के अंदर tds का चयन करने की परेशानी के लिए केवल टेबल के अंदर ही गए थे ... (मेज़पोशों पर ध्यान दें)

— ANEves

उत्तर के लिए धन्यवाद, यह अलग समाधान है

— मोहम्मद करमानी

यह एक ओवरकिल है। ओवर-स्पेसिफिकेशन प्रदर्शन के लिए खराब है। table tr tdअनावश्यक है के रूप में tdरों हमेशा के अंदर हैं trऔर table।

— tomasz86

Answer 7

Nth-child अभिव्यक्तियों का उपयोग करते हुए मेरा संस्करण:

पहले सेल को रंगने के लिए कैस्केड नियमों की सीएसएस अवधारणा का उपयोग करना और फिर उन लोगों को अनइंस्टॉल करना जो मैं पारदर्शी होना चाहता हूं। पहला चयनकर्ता पहले एक के बाद सभी कोशिकाओं का चयन करता है, और दूसरा चयन पारदर्शी होने के लिए पांचवें सेल का चयन करता है।

<style type="text/css">
  /* colored */
  td:nth-child(n+2) { background-color: #ddd }
  /* uncolored */
  td:nth-child(5) { background-color: transparent }
</style>

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

इस दिलचस्प संदर्भ की जाँच करें: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

Answer 8

यह एक पुराना सवाल है जिसमें बहुत सारे शानदार उत्तर हैं। बस उन -nऔर nth-last-childचयनकर्ताओं को जोड़ना चाहता था जिनका अभी तक उल्लेख नहीं किया गया है। सीएसएस को कई स्तंभों पर लागू करते समय वे सहायक होते हैं, लेकिन स्टाइल से पहले कॉलम की संख्या नहीं जान सकते हैं, या अलग-अलग चौड़ाई के साथ कई टेबल हो सकते हैं।

/* Select the first two */
table tr td:nth-child(-n + 2) {
  background-color: lightblue;
}

/* Select all but the first two */
table tr td:not(:nth-child(-n + 2)) {
    background-color:lightgreen;
}

/* Select last two only */
table tr td:nth-last-child(-n + 2) {
  background-color:mistyrose;
}

/* Select all but the last two */
table tr td:not(:nth-last-child(-n + 2)) {
    background-color:yellow;
}

jsFiddle: https://jsfiddle.net/3rpf5oht/2/