CSS का उपयोग करके वैकल्पिक तालिका पंक्ति रंग?

462

मैं इसके साथ वैकल्पिक पंक्ति रंग के साथ एक तालिका का उपयोग कर रहा हूं।

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

स्निपेट का विस्तार करें

यहां मैं क्लास के लिए उपयोग कर रहा हूं tr, लेकिन मैं केवल इसके लिए उपयोग करना चाहता हूं table। जब मैं trवैकल्पिक पर लागू होने की तुलना में तालिका के लिए कक्षा का उपयोग करता हूं ।

क्या मैं CSS का उपयोग करके अपना HTML इस तरह लिख सकता हूं?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

मैं सीएसएस का उपयोग करके पंक्तियों को "ज़ेबरा धारियों" कैसे बना सकता हूं?

html css html-table

— काली चरण राजपूत
स्रोत

1

मैंने nth-child () के लिए सभी संभावित पैटर्न का उपयोग करके एक डेमो बनाया है () - xengravity.com/demo/nth-child

— xengravity

760

$(document).ready(function()
{
  $("tr:odd").css({
    "background-color":"#000",
    "color":"#fff"});
});

tbody td{
  padding: 30px;
}

tbody tr:nth-child(odd){
  background-color: #4C8BF5;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

स्निपेट का विस्तार करें

एक CSS चयनकर्ता है, वास्तव में एक छद्म चयनकर्ता, जिसे nth-child कहा जाता है। शुद्ध CSS में आप निम्न कार्य कर सकते हैं:

tr:nth-child(even) {
    background-color: #000000;
}

नोट: IE 8 में कोई समर्थन नहीं।

या, यदि आपके पास jQuery है:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});

— रसेल डायस
स्रोत

क्या वैकल्पिक पंक्तियों के हाइपरलिंक रंग को बदलना भी संभव है। मैं पंक्ति के लिए अलग हाइपरलिंक रंग चाहता हूं और विषम के लिए दूसरा। धन्यवाद

— عثمان غني

4

बहुत बढ़िया जवाब! लेकिन सिर्फ जानकारी के लिए एक और CSS चयनकर्ता है जिसका उपयोग किया जा सकता है। tr:nth-of-type(odd/even)

— निखिल नंजप्पा

2

@ ع @مانثني: हाँ, आप बस करेंगेtr:nth-child(even) a

— जेरार्ड

1

अगर आप अपना html डायनामिक तरीके से लिखते हैं तो काम नहीं करता। फिर आपको पंक्तियों में कक्षाएं जोड़ने की आवश्यकता है।

— इरिक

2019 में: यह अब सबसे अच्छा समाधान नहीं है। शुद्ध सीएसएस का उपयोग करें ।

— चिरमिसू

158

आपके पास :nth-child()छद्म वर्ग है:

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

:nth-child()अपने ब्राउज़र के शुरुआती दिनों में समर्थन की तरह गरीब था। इसीलिए सेटिंग class="odd"एक ऐसी सामान्य तकनीक बन गई। 2013 के अंत में मुझे यह कहते हुए खुशी हो रही है कि IE6 और IE7 आखिरकार मर चुके हैं (या देखभाल करने के लिए पर्याप्त बीमार हैं) लेकिन IE8 अभी भी आसपास है - शुक्र है, यह एकमात्र अपवाद है।

— अल्वारो गोंजालेज
स्रोत

3

पसंदीदा उत्तर के रूप में यह सीएसएस को हेडर पर लागू नहीं करता है

— माइक

नमस्ते, यह कुछ वर्षों से देर हो चुकी है लेकिन क्लिक करने पर तालिका पंक्ति में jqeury के साथ bg- रंग के साथ चयनित वर्ग को जोड़ने के बारे में क्या है। मैंने देखा कि: nth-child छद्म वर्ग

— bg-

@dutchkillsg कि मेरे जवाब के लिए एक टिप्पणी के बजाय एक नया प्रश्न प्रतीत होता है ...

— rolvaro González

"ज़ेबरा धारियों" (यानी ऊर्ध्वाधर) के लिए, बस के tr:nth-child(odd)साथ विनिमय td:nth-of-type(odd)। ध्यान दें कि इस मामले में आप तत्वों के tdबजाय एक अलग छद्म वर्ग लागू कर रहे trहैं।

— चिरमिसू

36

बस अपने HTML कोड के साथ निम्नलिखित जोड़ें ( <head>) और आप कर रहे हैं।

HTML:

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

आसान और तेज jQuery के उदाहरणों से।

— bmich72
स्रोत

यह स्वीकृत उत्तर होना चाहिए। जहां तक संभव हो, सीएसएस को स्टाइल को संभालना चाहिए, जबकि जावास्क्रिप्ट का उपयोग अन्य मामलों को संभालने के लिए किया जा सकता है।

— टॉरमॉड ह्यूजेन

मैं दैनिक आधार पर html नहीं करता। #cccमुझे एक मान्य रंग कोड नहीं लगता है। क्या तुम समझा सकते हो? धन्यवाद।

— tommy.carstensen

1

@ tommy.carstensen को "शॉर्टहैंड हेक्साडेसिमल फॉर्म" कहा जाता है। मूल रूप #cccसे इसका विस्तार हो जाता है #cccccc, जिसका अर्थ है कि प्रत्येक RGB रंग में हेक्साडेसिमल मान ccया दशमलव मान 204(यानी rgb(204, 204, 204)) होता है। इसके बारे में यहाँ और पढ़ें -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

— Nick Grealy

Chrome संस्करण 78.0.3904.108

— IlludiumPu36

13

मैं उपयोग सीएसएस के साथ इस तरह से अपने HTML लिख सकते हैं?

हाँ आप कर सकते हैं लेकिन तब आपको :nth-child()छद्म चयनकर्ता का उपयोग करना होगा (जिसका सीमित समर्थन हालांकि):

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

— सरफराज
स्रोत

13

हम वैकल्पिक पंक्ति रंगों के लिए विषम और यहां तक कि CSS नियमों और jQuery विधि का उपयोग कर सकते हैं

CSS का उपयोग करना

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

JQuery का उपयोग करना

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

स्निपेट का विस्तार करें

— संतोष खलसे
स्रोत

10

उपरोक्त कोडों में से अधिकांश IE संस्करण के साथ काम नहीं करेंगे। IE + अन्य ब्राउज़रों के लिए काम करने वाला समाधान यह है।

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

— श्रीवंत अट्टनायक
स्रोत

9

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

— प्रणय राणा
स्रोत

46

ठीक है, मुझे पता है कि इस साइट पर jQuery काफी सर्वव्यापी है, लेकिन बिना स्पष्टीकरण के आपको jQuery पोस्ट नहीं करना चाहिए। यह स्क्रिप्ट अपने आप काम नहीं करेगी।

— असंतुष्टगीत

4

आप nth-child (odd / even) सेलेक्टर्स का उपयोग कर सकते हैं, हालाँकि सभी ब्राउज़र ( यानी 6-8, ff v3.0 ) इन नियमों का समर्थन नहीं करते हैं, इसलिए क्‍योंकि क्‍लास जोड़ने के लिए javascript / jquery समाधान के किसी न किसी रूप में ज्‍यादातर समाधान वापस आते हैं। टाइगर स्ट्राइप इफ़ेक्ट पाने के लिए इन गैर आज्ञाकारी ब्राउज़रों की पंक्तियाँ।

— लाल चौकोर
स्रोत

3

PHP में ऐसा करने का एक आसान तरीका है, अगर मैं आपकी क्वेरी को समझता हूं, तो मुझे लगता है कि आप PHP में कोड रखते हैं और आउटपुट बढ़ाने के लिए आप CSS और जावास्क्रिप्ट का उपयोग कर रहे हैं।

डेटाबेस से डायनेमिक आउटपुट लूप के लिए परिणाम के माध्यम से पुनरावृति के लिए ले जाएगा जो तब तालिका में लोड किए जाते हैं। बस इस तरह एक फ़ंक्शन कॉल जोड़ें:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

फिर फ़ंक्शन को पेज या लाइब्रेरी फ़ाइल में जोड़ें:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}

अब यह वैकल्पिक रूप से प्रत्येक नव-निर्मित तालिका पंक्ति में रंगों के बीच वैकल्पिक रूप से होगा।

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

उम्मीद है की यह मदद करेगा।

— निशान
स्रोत

धन्यवाद @ चिह्न। यह तय नहीं है कि साइट PHP, .net या सरल HTML में होगी।

— काली चरण राजपूत