ट्विटर बूटस्ट्रैप

Question

का उपयोग कर विलय तालिका कक्ष बनाना हम <thead> को 2 स्तरों के साथ बनाने के लिए बूटस्ट्रैप का उपयोग कैसे कर सकते हैं (उदाहरण: ग्रीष्मकालीन अवधि में हल्के डेटा 1, डेटा 2, डेटा 3) और तालिका कक्ष भी हैं जो 2 लंबवत कोशिकाओं (जैसे: राज्य) विलय करते हैं?

यह इस प्रकार से लग रहा है Excel में की तरह है:

Answer 1

मैं कैसे बिल्कुल बूटस्ट्रैप के साथ यह करने के लिए यकीन नहीं है, लेकिन मैं कैसे HTML में यह करने के लिए पता है:

---

आप colspan और rowspan विशेषताओं के संयोजन का उपयोग कर सकते हैं, जहां rowspan का उपयोग टेबल हेडर के लिए कई पंक्तियों पर फैला हुआ है, और यह colspan और कॉलम पर लागू होता है।

1. अपने टेबल हेडर को पंक्तियों में विभाजित करें, उनके स्तर के अनुसार।
   तो पहली तालिका पंक्ति में आपके "पैरेंट" हेडर शामिल होंगे, यानी हेडर जो हर दूसरे शीर्षलेख और डेटा का टुकड़ा नीचे आ रहे हैं।

2. आपकी पहली पंक्ति में 3 कॉलम होना चाहिए: State, Utilities Company और Summer Period।

3. आपके द्वारा ड्रिल किए जाने वाले प्रत्येक स्तर के लिए बाद में शीर्षलेख पंक्तियां जोड़ें। यहां, आपकी अगली पंक्ति प्रत्येक डेटा सेट के लिए टेबल हेडर होगी।

---

के गुणों लागू करते हैं:

1. आपका 1 th के लिए राज्य तक फैला 2 पंक्तियाँ, तो हम rowspan="2" जोड़ें।
2. यह अगले तालिका शीर्षलेख पर लागू होता है, उपयोगिता कंपनी।
3. गर्मी की अवधि तक फैला 1 पंक्ति और 3 कॉलम, तो हम जोड़ने colspan="3"
4. शीर्षक में एक और tr जोड़ें, data1, data2 और data3 के लिए 3 कोशिकाओं से युक्त।

जिसके परिणामस्वरूप एचटीएमएल इस तरह दिखता है:

<thead> 
    <tr> 
    <th rowspan="2">State</th> 
    <th rowspan="2">Utilities Company</th> 
    <th colspan="3">Summer Period</th> 
    </tr> 
    <tr> 
    <th>data1</th> 
    <th>data2</th> 
    <th>data3</th> 
    </tr> 
</thead> 

---

यहाँ एक demo fiddle है।

बूटस्ट्रैप.css सहित एक अपडेटेड डेमो (वास्तव में बेस के रूप में रीसेट) है, भले ही यह सचमुच demo fiddle updated कुछ भी नहीं करता है।

Answer 2

बूटस्ट्रैप में एकाधिक लाइनों के साथ एक जटिल शीर्षलेख बनाना ठीक है जैसा कि यह HTML में है। यहाँ बूटस्ट्रैप के लिए HTML में अपनी मेज है:

<table class="table table-bordered"> 
    <thread> 
    <tr> 
     <th>State</th> 
     <th>Utilities Company</th> 
     <th colspan="3">Summer Period</th> 
    </tr> 
    <tr> 
     <th></th> 
     <th></th> 
     <th>data1</th> 
     <th>data2</th> 
     <th>data3</th> 
    </tr> 
    </thread> 
    <tbody> 
    ... data here ... 
    </tbody> 
</table> 

आप सही ढंग से

Answer 3

<table class="table table-bordered"> 
    <thread> 
    <tr> 
     <th rowspan="2">State</th> 
     <th rowspan="2">Utilities Company</th> 
     <th colspan="3">Summer Period</th> 
    </tr> 
    <tr> 
     <th>data1</th> 
     <th>data2</th> 
     <th>data3</th> 
    </tr> 
    </thread> 
    <tbody> 
    ... data here ... 
    </tbody> 
</table>