बूटस्ट्रैप तालिका धारीदार: मैं धारीदार पृष्ठभूमि रंग कैसे बदल सकता हूँ?

124

बूटस्ट्रैप क्लास के साथ table-striped, मेरी टेबल की हर दूसरी पंक्ति में पृष्ठभूमि का रंग समान है #F9F9F9। मैं इस रंग को कैसे बदल सकता हूं?

css twitter-bootstrap html-table

— drake035
स्रोत

116

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: red;
}

इस लाइन को bootstrap.css में बदलें या आप (2n + 1) के बजाय (विषम) या (यहाँ तक कि) का उपयोग कर सकते हैं

— फ्लोरिन
स्रोत

100

यह मत करो। अगली बार जब आप बूटस्ट्रैप अपग्रेड करेंगे तो आप अपना कस्टम ओवरराइड खो देंगे। एक अलग फ़ाइल में कस्टम सीएसएस रखने के लिए बेहतर है जिसे आप सीधे बूटस्ट्रैप के बाद डालते हैं। सिर में।

— बेन थर्ले

आप यहां पूरी पंक्ति को मँडराते हुए पृष्ठभूमि-रंग को कैसे बदलेंगे?

— बैरी माइकल डॉयल

2

यह पृष्ठ बताता है कि यह एक हॉवर के लिए कैसे करें [ stackoverflow.com/questions/15643037/…

— Yvon Huynh

4

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

— राडदेवस

कभी भी किसी भी थर्ड-पार्टी लाइब्रेरी को सीधे न बदलें। कभी नहीँ! बस अपनी स्वयं की सीएसएस फ़ाइल में शैली को ओवरराइड करें।

— मेहरदाद

133

बूटस्ट्रैप लोड करने के बाद निम्नलिखित सीएसएस शैली जोड़ें:

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

— किरिआकोस
स्रोत

डिफ़ॉल्ट बूटस्ट्रैप टेबल के रंग को ओवरराइट करने पर अच्छा काम करता है। धन्यवाद।

— यूरोपा

यह भी पंक्तियों पर "टेबल-होवर" वर्ग को अक्षम करता है ... क्या कोई फिक्स है?

— निकलें

14

यदि आप बूटस्ट्रैप 3 का उपयोग कर रहे हैं, तो आप फ्लोरिन की विधि का उपयोग कर सकते हैं, या कस्टम सीएसएस फ़ाइल का उपयोग कर सकते हैं।

यदि आप संसाधित सीएसएस फ़ाइलों के बजाय बूटस्ट्रैप कम स्रोत का उपयोग करते हैं, तो आप सीधे इसे बदल सकते हैं bootstrap/less/variables.less।

कुछ इस तरह खोजें:

//** Background color used for `.table-striped`.
@table-bg-accent:               #f9f9f9;

— लुकास एस।
स्रोत

11

आपके पास दो विकल्प हैं, या तो आप शैलियों को एक कस्टम स्टाइलशीट के साथ ओवरराइड करें, या आप मुख्य बूटस्ट्रैप सीएसएस फ़ाइल को संपादित करें। मैं पूर्व को पसंद करता हूं।

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

<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">

में custom.css

.table-striped>tr:nth-child(odd){
   background-color:red;
}

— आइसा आदिल
स्रोत

मेरे लिए काम नहीं किया। Kyriakos द्वारा जवाब वास्तव में अच्छी तरह से काम करता है।

— १६:१६ पर वारग्रवाल २ var

यह उदाहरण tbody टैग को याद कर रहा है

— kenecaswell

> का अर्थ है तत्काल बच्चा, इसलिए यदि टेबल और ट्र के बीच कोई टैग है, तो यह काम नहीं करेगा। लेकिन सिर्फ> हटाएं, और यह एक निर्दिष्ट तालिका के तहत सभी tr के लिए मान्य होगा, भले ही वे तत्काल बच्चे हों या नहीं।

— कूदता है

3

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

3

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #e08283;
  color: white;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
  background-color: #ECEFF1;
  color: white;
}

समान पंक्तियों के रंग बदलने के लिए 'सम' का उपयोग करें और विषम पंक्तियों के रंग बदलने के लिए 'विषम' का उपयोग करें।

— sammani anuththara
स्रोत

यह बूटस्ट्रैप के टेबल-होवर वर्ग को अक्षम करता है, दोनों का उपयोग करने का एक तरीका है?

— निकलें

3

तालिका-धारीदार हटाएं इसकी कोशिश पंक्ति रंग बदलने के आपके प्रयासों को पछाड़ती है।

फिर इसे In css करें

   tr:nth-child(odd) {
    background-color: lightskyblue;
    }

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

    th {
       background-color: lightseagreen;
    }

— डेविड मॉरो
स्रोत

2

मुझे यह बिसात पैटर्न (ज़ेबरा पट्टी के एक सबसेट के रूप में) एक दो-स्तंभ तालिका प्रदर्शित करने का एक सुखद तरीका मिला। यह LESS CSS का उपयोग करते हुए लिखा गया है, और बेस रंग से सभी रंगों की कुंजी है।

@base-color: #0000ff;
@row-color: lighten(@base-color, 40%);    
@other-row: darken(@row-color, 10%);

tbody {
    td:nth-child(odd) { width: 45%; }
    tr:nth-child(odd) > td:nth-child(odd) {
        background: darken(@row-color, 0%); }
    tr:nth-child(odd) > td:nth-child(even) {
        background: darken(@row-color, 7%); }
    tr:nth-child(even) > td:nth-child(odd) {
        background: darken(@other-row, 0%); }
    tr:nth-child(even) > td:nth-child(even) {
        background: darken(@other-row, 7%); }
}

नोट मैंने गिरा दिया है .table-striped, लेकिन बात नहीं बन रही है।

जैसा दिखता है: यहाँ छवि विवरण दर्ज करें

— जॉन लेहमैन
स्रोत

2

बूटस्ट्रैप 4 के साथ, में जिम्मेदार सीएसएस विन्यास bootstrap.cssके लिए .table-stripedहै:

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

एक बहुत ही सरल समाधान के लिए, मैंने इसे अपनी custom.cssफ़ाइल में कॉपी किया , और इसके मानों को बदल दिया background-color, ताकि अब मेरे पास एक हल्का हल्का नीला छाया हो:

.table-striped tbody tr:nth-of-type(odd) {
  background-color:  rgba(72, 113, 248, 0.068);
}

— अन्ना कोस्टलंगा
स्रोत

0

यदि आप वास्तव में रंगों को उलटना चाहते हैं, तो आपको एक नियम जोड़ना चाहिए जो "विषम" पंक्तियों को सफेद बनाता है और साथ ही जो भी रंग चाहे "समान" पंक्तियों को बनाते हैं।

— PhPGuy
स्रोत

0

धारीदार क्रम बदलने के लिए सबसे आसान तरीका:

अपनी तालिका tr टैग से पहले खाली जोड़ें tr।

— Royal_MGH
स्रोत