मैं बूटस्ट्रैप

Question

के साथ एक HTML तालिका कॉलम को हाइलाइट कैसे करूं मैं बूटस्ट्रैप का उपयोग कर रहा हूं और एक तालिका बनाई है जिसमें मुझे एक साथ समूहीकृत कॉलम की आवश्यकता है। क्या कोई बूटस्ट्रैप विकल्प है जिसका मैं उपयोग कर सकता हूं? मैं इसे करने के लिए अपना स्वयं का सीएसएस लिखने को तैयार हूं, लेकिन ऐसा नहीं होगा कि ऐसा करने के लिए बूटस्ट्रैप तरीके से बनाया गया हो।

उदाहरण के लिए, नीचे दी गई तालिका में मैं एक रंग पृष्ठभूमि के साथ Current कॉलम और New स्तंभों को एक और रखना चाहता हूं।

http://jsfiddle.net/75v7W/

<table> 
    <thead> 
     <tr> 
      <td></td> 
      <td colspan="2" style="text-align: center;">Current</td> 
      <td colspan="2" style="text-align: center;">New</td> 
     </tr> 
     <tr> 
      <th>ID</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Fisrt Name</th> 
      <th>Last Name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>John</td> 
      <td>Bauer</td> 
      <td>Jack</td> 
      <td>Bauer</td> 
     </tr> 
    </tbody> 
</table> 

अद्यतन: मैं (हालांकि बहुत ज्यादा नहीं) मैं colgroup का उपयोग करने और, अफसोस, कस्टम सीएसएस के लिए क्या देख रहा हूँ के बारे में कुछ हासिल किया है: http://jsfiddle.net/75v7W/4/

Answer 1

मैं कुछ हासिल किया जो मैं colgroup का उपयोग करने के लिए देख रहा हूं और, हां, कस्टम सीएसएस (हालांकि बहुत ज्यादा नहीं): http://jsfiddle.net/75v7W/4/

नोट:के लिए नीचेएस, मैंने bootstrap.css में डिफ़ॉल्ट रंगों से सफलता, त्रुटि इत्यादि से खींच लिया। यदि आपने अपने bootstrap.css को कस्टमाइज़ किया है, तो ये विशिष्ट रंग आपके लिए काम नहीं कर सकते हैं।

सीएसएस

colgroup col.success { 
    background-color: #dff0d8; 
} 
colgroup col.error{ 
    background-color: #f2dede; 
} 
colgroup col.warning { 
    background-color: #fcf8e3; 
} 
colgroup col.info { 
    background-color: #d9edf7; 

टेबल

<table class="table table-condensed"> 
    <colgroup> 
     <col> 
     <col span="2" class="info"> 
     <col span="2" class="success"> 
    </colgroup> 
    <thead> 
     <tr> 
      <td></td> 
      <td colspan="2" style="text-align: center;">Current</td> 
      <td colspan="2" style="text-align: center;">New</td> 
     </tr> 
     <tr> 
      <th>ID</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Fisrt Name</th> 
      <th>Last Name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>John</td> 
      <td>Bauer</td> 
      <td>Jack</td> 
      <td>Bauer</td> 
     </tr> 
    </tbody> 
</table> 

Answer 2

अगर यह संभव उपयोग बूटस्ट्रैप निर्माण में सीएसएस वर्गों है यह बेहतर है।

वहाँ एक तरह से बनाया गया है एक कॉलम को हाइलाइट करने के लिए: https://jsfiddle.net/DanielKis/wp6bt229/

HTML:

<table class="table table-condensed"> 
    <colgroup> 
    <col class="bg-success"></col> 
    <col span="2" class="bg-info"></col> 
    <col span="2" class="bg-danger"></col> 
    </colgroup> 
    <thead> 
    <tr> 
     <td></td> 
     <td colspan="2" class="text-center bg-primary">Current</td> 
     <td colspan="2" class="text-center">New</td> 
    </tr> 
    <tr> 
     <th>ID</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Fisrt Name</th> 
     <th>Last Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>Johnny</td> 
     <td>English</td> 
     <td>Bud</td> 
     <td>Spencer</td> 
    </tr> 
    </tbody> 
</table> 

आप

• bg-primary
• bg-success
उपयोग कर सकते हैं
• bg-info
• bg-warning
• bg-danger

Css कक्षाएं अपने कॉलम, कोशिकाओं, आदि