Colspan / Rowspan उन तत्वों के लिए जिनका डिस्प्ले टेबल-सेल पर सेट है

Question

मेरे पास निम्नलिखित कोड हैं:

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan2 {
        /* What to do here? */
    }
</style>

बहुत सीधा। मैं तत्वों के साथ एक colspan (या colspan के बराबर) कैसे जोड़ूं display: table-cell?

Comments

क्या आप सिर्फ एक मेज का उपयोग नहीं कर सकते? यह बहुत आसान होगा। इसके अलावा अगर यह सारणीबद्ध डेटा है तो यह अधिक अर्थपूर्ण भी होगा।

— punkrockbuddyholly

@ यह शायद ही हो सकता है, यह सिर्फ एक दर्द और अनावश्यक होगा। 960 की तरह ग्रिड सिस्टम मूल रूप से इसे प्राप्त करते हैं लेकिन पूरे पेज लेआउट के लिए।

— punkrockbuddyholly

@MrMisterMan: मुझे यकीन नहीं है कि आप क्या कह रहे हैं। 960.gs उपयोग नहीं करता है display: table-cell।

— १४:०४

@thirtydot क्षमा करें, मैं ओपी द्वारा पूछे गए विशेष प्रश्न को भूल गया था। आप सही हैं, आप CSS के माध्यम से एक colspan नहीं जोड़ सकते। मैं इंगित कर रहा था कि आप div का व्यवहार पंक्तियों और स्तंभों की तरह कर सकते हैं और इसमें कई स्तंभों में फैली हुई कोशिकाएँ शामिल हैं।

— punkrockbuddyholly

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

— बर्नार्ड दुसाबलोन

Answer 1

जहाँ तक मुझे पता है, कोल्प्सन / रौस्पैन की कमी की सीमाओं में से एक है display:table। इस पोस्ट को देखें:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

Answer 2

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

उदाहरण प्रति पंक्ति और दो पंक्तियों के साथ <तालिका> के बराबर है, जहां दूसरी पंक्ति में सेल एक td है colspan="2"।

मैंने इसको Iceweasel 20, Firefox 23 और IE 10 के साथ परीक्षण किया है।

div.table {
  display: table;
  width: 100px;
  background-color: lightblue;
  border-collapse: collapse;
  border: 1px solid red;
}

div.row {
  display: table-row;
}

div.cell {
  display: table-cell;
  border: 1px solid red;
}

div.colspan,
div.colspan+div.cell {
  border: 0;
}

div.colspan>div {
  width: 1px;
}

div.colspan>div>div {
  position: relative;
  width: 99px;
  overflow: hidden;
}

<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div><div>
                cell 3
            </div></div>
        </div>
        <div class="cell"></div>
    </div>
</div>

लाइव एक्शन (डेमो) यहां ।

संपादित करें: मैंने कोड को अधिक प्रिंटर-अनुकूल बनाने के लिए समाप्त किया, क्योंकि वे डिफ़ॉल्ट रूप से पृष्ठभूमि-रंग छोड़ते हैं। मैंने रौस्पैन-डेमो भी बनाया , जो देर से उत्तर से प्रेरित था।

Comments

मैं इसी तरह के समाधान की तलाश में हूं। लेकिन इसके बजाय, मेरे पास शीर्ष पंक्ति पर 5 सेल हैं। नीचे की पंक्ति में, मुझे शीर्ष पंक्ति के रूप में 1 सेल समान आकार चाहिए। फिर एक कोशिका वाले कोल्पसन = 2 और दूसरे सेल वाले कोल्प्सन = 2 के रूप में अच्छी तरह से नीचे की पंक्ति में कुल 5 सेल बनाते हैं। यहाँ आपके समाधान के आधार पर jsfiddle समस्या है। कोई विचार? jsfiddle.net/7wdza4ye/1

— वरुण वर्मा

@ वरुणवर्मा, आपको सेल 7 और 8 के बीच खाली सेल जोड़ना होगा। बस <div class="cell"></div>काम जोड़ना (कम से कम फ़ायरफ़ॉक्स के साथ)। इस डिजाइन के साथ, आपको खाली सेल (एस) के साथ पैड करने की आवश्यकता है। उदाहरण के लिए, यदि आपके पास ऐसा था कि सेल 7 कोल्डस्पैन = 3 और सेल 8 सामान्य था, तो आपको कोशिकाओं 7 और 8 के बीच दो खाली कोशिकाओं की आवश्यकता होगी। जब तक आप कुछ और डिज़ाइन नहीं करेंगे (मार्जिन? एकल अनुकूलित डिव?) । इसके अलावा, 100px और 5 कोशिकाओं की चौड़ाई चीजों को मुश्किल बना देती है, क्योंकि शब्द सीएसएस-कोशिकाओं को फैलाते हैं, अतिप्रवाह-सेटिंग में कोई फर्क नहीं पड़ता है। तुम भी पुनर्गणना के लिए की जरूरत widthके लिए div.colspan>div>div।

— F-3000

इसने काम कर दिया। धन्यवाद। वास्तव में, मैंने सेल 8 के बाद एक खाली सेल जोड़ा क्योंकि नीचे की सीमा दिखाई नहीं दे रही थी। यहाँ नवीनतम है: jsfiddle.net/7wdza4ye/3 । सुनिश्चित करें कि सेल 7 और 8 के बीच की सीमा कैसे प्राप्त की जाए। कोई सुझाव? आपकी सहायता के लिए धन्यवाद।

— वरुण वर्मा

@VarunVerma, क्रोम के साथ बाहरी बॉर्डर 8 के बाद खाली सेल के बिना अधूरा था, इसलिए यह वास्तव में आवश्यक है। कोशिकाओं 7 और 8 के बीच की सीमा को जोड़ने का सरल तरीका यह हो सकता है div.colspan{border-left:1px solid red}:। इसे div.colspan सीमाहीन सेट करने वाले नियम से कहीं नीचे रखा जाना चाहिए, या इसे ओवररॉल किया जाएगा।

— F-3000

धन्यवाद @ F-3000। यह मददगार था। बाकी के लिए, यहाँ F-3000 के समाधान पर आधारित नवीनतम लिंक: jsfiddle.net/7wdza4ye/4

— वरुण वर्मा

Answer 3

एक सरल समाधान जो मेरे लिए Chrome 30 में काम करता है:

Colspan को पंक्तियों के display: tableबजाय का उपयोग करके अनुकरण किया जा सकता है display: table-row:

.table {
    display: block;
}
.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
    display: block;
}

एकमात्र नुकसान यह है कि स्टैक्ड पंक्तियों की कोशिकाएँ लंबवत संरेखित नहीं होंगी, क्योंकि वे विभिन्न तालिकाओं से हैं।

Answer 4

यदि आप एक सीधे सीएसएस तरीके की तलाश कर रहे हैं, तो आप एक कोलस्पैन का अनुकरण कर सकते हैं, तो आप उपयोग कर सकते हैं display: table-caption।

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #000;
}
.colspan2 {
  /* What to do here? */
  display: table-caption;
}

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

Comments

यह कमाल है आप रॉक!

— राज कमल

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

— मिचेल

Answer 5

बस एक का उपयोग करें table।

लेआउट उद्देश्यों के लिए उपयोग किए जाने पर तालिका केवल पर ही आधारित होती है।

यह सारणीबद्ध डेटा (डेटा के पंक्तियों / स्तंभों) की तरह लगता है। इसलिए मैं a का उपयोग करने की सलाह दूंगा table।

अधिक जानकारी के लिए इस सवाल का मेरा जवाब देखें :

तालिकाओं के रूप में divs के साथ एक ही चीज बनाने

Comments

बात यह है, यह सारणीबद्ध डेटा के लिए नहीं है, इसलिए मैं एक तालिका का उपयोग नहीं करना चाहता हूं :)

— मदार का भूत

मुझे नहीं लगता है कि टेबल की तरह व्यवहार करने के लिए सबकुछ सीएसएस करना किसी तरह से केवल टेबल का उपयोग करने के लिए बेहतर है। बेशक tr/ tdस्पैम सबसे सुंदर HTML नहीं है, लेकिन क्या यह एकमात्र कारण है? हर कोई कहता है कि तालिकाओं का उपयोग "प्रारूप" के लिए नहीं किया जाता था, लेकिन html स्वयं का मतलब "नहीं" था, जो हम आज के मानकों से स्वीकार्य हैं, जिनमें से आधे वेब अनुप्रयोगों सहित।

— थोड़ा

लगभग एक साल बाद, लेकिन - थोड़ा सा, मैं बिना किसी कारण के तालिकाओं से बचने वाले लोगों के साथ आपकी जलन साझा करता हूं, क्योंकि "तालिकाएं शैली से बाहर हैं"। हालाँकि, मैं कुछ उत्तरदायी डिज़ाइनों में चल रहा हूँ जहाँ एक मेज नहीं होना उपयोगी है, इसलिए इसे कम चौड़ाई पर पुनर्व्यवस्थित किया जा सकता है। मैं divs के लिए colspan नहीं है सीखना थोड़े निराशाजनक है।

— स्पिन

Answer 6

यहाँ सीएसएस में कॉलम का एक तरीका है जिसे मैंने अपनी स्थिति के लिए उपयोग किया है।

https://jsfiddle.net/mb8npttu/

<div class='table'>
    <div class='row'>
        <div class='cell colspan'>
            spanning
        </div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>

    <div class='row'>
        <div class='cell'>1</div>
        <div class='cell'>2</div>
        <div class='cell'>3</div>
    </div>
</div>

<style>
    .table { display:table; }
    .row { display:table-row; }
    .cell { display:table-cell; }
    .colspan { max-width:1px; overflow:visible; }
</style>

Comments

मैं बढ़ाने के लिए किया था .colspanके साथ white-space: nowrap;परिणाम मैं चाहता था पाने के लिए है, लेकिन यह बहुत अच्छा काम किया।

— kshetline

Answer 7

बृहदान्त्र को पूरी मेज की चौड़ाई बनाने के लिए एक समाधान है। आप इस तकनीक का उपयोग तालिका के एक भाग को ठंडा करने के लिए नहीं कर सकते हैं।

कोड:

    *{
      box-sizing: border-box;
    }
    .table {
        display: table;
        position: relative;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid red;
        padding: 5px;
        text-align: center;
    }
    .colspan {
        position: absolute;
        left: 0;
        width: 100%;
    }
    .dummycell {
        border-color: transparent;
    }

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell dummycell">&nbsp;</div>
        <div class="cell colspan">Cell</div>
    </div>
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
</div>

स्पष्टीकरण:

हम इसे टेबल की पूरी चौड़ाई बनाने के लिए कोलस्पैन पर निरपेक्ष स्थिति का उपयोग करते हैं। तालिका को स्वयं स्थिति सापेक्ष चाहिए। हम पंक्तियों की ऊंचाई को बनाए रखने के लिए डंबिकेल का उपयोग करते हैं, स्थिति निरपेक्ष दस्तावेज़ के प्रवाह का पालन नहीं करती है।

बेशक आप इन दिनों इस समस्या से निपटने के लिए फ्लेक्सबॉक्स और ग्रिड का उपयोग कर सकते हैं।

Answer 8

सीएसएस

.tablewrapper {
  position: relative;
}
.table {
  display: table;
  position: relative
}
.row {
  display: table-row;
}
.cell {
  border: 1px solid red;
  display: table-cell;
}
.cell.empty
{
  border: none;
  width: 100px;
}
.cell.rowspanned {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}
.cell.colspan {
  position: absolute;
  left: 0;
  right: 0;
}

एचटीएमएल

<div class="tablewrapper">
  <div class="table">
    <div class="row">
      <div class="cell rowspanned">
        Center
      </div>
      <div class="cell">
        Top right
      </div>
    </div>
    <div class="row">
      <div class="cell empty"></div>
      <div class="cell colspan">
        Bottom right
      </div>
    </div>
  </div>
</div>

कोड

Answer 9

यह सिर्फ शुद्ध सीएसएस के साथ किया जा सकता है और "नकली" कोलस्पैन में पाठ को केंद्रित कर सकता है।

ट्रिक को पंक्तियों को सेट करना है position:relative, फिर "खाली divs" को उस rowजगह पर रखना है जहाँ आप colspan(वे heightकाम करने के लिए होना चाहिए ) बनाना चाहते हैं , cellजहां सामग्री के रूप में सामग्री सेट है display:grid, और अंत में, position:absoluteतत्व पर लागू होता है सेल के अंदर (और इसे केंद्र के रूप में आप किसी अन्य निरपेक्ष तत्व को केंद्र में रख सकते हैं)।

 .table {
        display: table;
  }
  .row {
      display: table-row;
      position: relative;
  }
  .cell {
      display: table-cell;
      background-color: blue;
      color: white;
      height: 26px;
      padding: 0 8px;
  } 
  .colspan2 {
      display: grid;
  }
  .colspan2 p {
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
    margin: 0;
  }

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2"><p>Cell</p></div>
        <div class="cell"></div>
    </div>
</div>

Answer 10

उचित div वर्गों और CSS विशेषताओं का उपयोग करके, आप colspan और rowspan के वांछित प्रभावों की नकल कर सकते हैं।

यहाँ सीएसएस है

.table {
    display:table;
}

.row {
    display:table-row;
}

.cell {
    display:table-cell;
    padding: 5px;
    vertical-align: middle;
}

यहाँ नमूना HTML है

<div class="table">
    <div class="row">
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">X</div>
                    <div class="cell">Y</div>
                    <div class="cell">Z</div>
                </div>
                <div class="row">
                    <div class="cell">2</div>
                    <div class="cell">4</div>
                    <div class="cell">6</div>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">
                        <div class="table">
                            <div class="row">
                                <div class="cell">A</div>
                            </div>
                            <div class="row">
                                <div class="cell">B</div>
                            </div>
                        </div>
                    </div>
                    <div class="cell">
                        ROW SPAN
                    </div>    
                </div>
            </div>
        </div>
    </div>
</div>    

जो मैं दोनों प्रश्नों में देख रहा हूं, और सबसे अधिक प्रतिक्रियाएं हैं, क्या लोग यह भूल जाते हैं कि किसी भी दिए गए div में "टेबल-सेल" के रूप में कार्य कर रहे हैं, आप एक और div सम्मिलित कर सकते हैं जो एक एम्बेडेड तालिका की तरह काम कर रही है, और प्रक्रिया शुरू करें ऊपर।

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

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

Comments

सबसे पहले, HTML5 के लिए पूर्ण समर्थन है <table>- यह सिर्फ इतना है कि लोगों को इसे दृश्य स्वरूपण के लिए उपयोग करने से बचना चाहिए । संरचित डेटा प्रदर्शित करने के लिए इसका उपयोग करना है, जहां इसका उपयोग किया जाना चाहिए , जब तक कि कुछ और (जैसे , उदाहरण के रूप में) कार्य के लिए बेहतर फिट बैठता है। दूसरी बात, दोस्त, 4 टेबल। आप टेबल (पंक्तिस्पैन) पर दिलचस्प सवाल लाते हैं, लेकिन आपका जवाब इसके बजाय उपयोग करने के लिए रोता है । मुझे यह देखना होगा कि मेरा समाधान यहाँ कैसे काम करता है ...<ul><table>

— F-3000

मैं अपनी पिछली टिप्पणी को संपादित करूंगा, लेकिन टाइमलीमिट हिट्स में। कोलस्पैन के बारे में मेरे जवाब के साथ, पंक्तिस्पैन को आपके ... मूल दृष्टिकोण के मुकाबले कम परेशानी के साथ पूरा किया जा सकता है। खुद ही देख लो ।

— F-3000

आपकी प्रतिक्रिया के लिए धन्यवाद। मैंने कभी नहीं कहा कि HTML5 तालिकाओं का समर्थन नहीं करता है। बहुत से लोग बस इससे बचना चाह रहे हैं। कभी-कभी, वेब-ऐप लिखते समय (केवल एक विज्ञापन-प्रकार पृष्ठ के विपरीत), आपको बटन और / या नियंत्रण प्लेसमेंट के लिए निश्चित लेआउट की अधिक आवश्यकता होती है।

— जेआरसी

Answer 11

आप कोलस्पैन सामग्री की स्थिति को "सापेक्ष" और पंक्ति को इस तरह "निरपेक्ष" के रूप में सेट कर सकते हैं:

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}

Answer 12

आप इसे वर्तमान में प्राप्त नहीं कर सकते।

AFAIK को CSS टेबल्स द्वारा कवर किया जाएगा , एक विनिर्देश जो वर्तमान में "कार्य प्रगति पर" स्थिति में दिखाई देता है।

Answer 13

आप इस समाधान को आज़मा सकते हैं, जहाँ आप div https://codepen.io/pkachhia/pen/JyWMxY का उपयोग करके कोलस्पैन लगाने का तरीका जान सकते हैं

HTML:

<div class="div_format">
            <div class="divTable">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Project Name</div>
                        <div class="divTableCell cell_value">: Testing Project</div>
                        <div class="divTableCell cell_lable">Project Type</div>
                        <div class="divTableCell cell_value">: Web application</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Version</div>
                        <div class="divTableCell cell_value">: 1.0.0</div>
                        <div class="divTableCell cell_lable">Start Time</div>
                        <div class="divTableCell cell_value">: 2016-07-10 11:00:21</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Version</div>
                        <div class="divTableCell cell_value">: 2.0.0</div>
                        <div class="divTableCell cell_lable">End Time</div>
                        <div class="divTableCell cell_value">: 2017-07-10 11:00:23</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Revision</div>
                        <div class="divTableCell cell_value">: 3</div>
                        <div class="divTableCell cell_lable">Overall Result</div>
                        <div class="divTableCell cell_value txt_bold txt_success">: Passed</div>
                    </div>                          
                </div>
                <div class="divCaptionRow">
                    <div class="divCaptionlabel">Description</div>
                    <div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
                </div>
            </div>
        </div>

सीएसएस:

body {
                font-family: arial
            }
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box
            }
            .div_format {
                width: 100%;
                display: inline-block;
                position: relative
            }           
            .divTable {
                display: table;
                width: 100%;            
            }
            .divTableRow {
                display: table-row
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group
            }
            .divTableCell,
            .divTableHead {
                display: table-cell;
                padding: 10px
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group;
                font-weight: bold
            }
            .divTableFoot {
                background-color: #EEE;
                display: table-footer-group;
                font-weight: bold
            }
            .divTableBody {
                display: table-row-group
            }
            .divCaptionRow{
                display: table-caption;
                caption-side: bottom;
                width: 100%;
            }
            .divCaptionlabel{
                caption-side: bottom;
                display: inline-block;
                background: #ccc;
                padding: 10px;
                width: 15.6%;
                margin-left: 10px;
                color: #727272;
            }
            .divCaptionValue{
                float: right;
                width: 83%;
                padding: 10px 1px;
                border-bottom: 1px solid #dddddd;
                border-right: 10px solid #fff;
                color: #5f5f5f;
                text-align: left;
            }

            .cell_lable {
                background: #d0d0d0;
                border-bottom: 1px solid #ffffff;
                border-left: 10px solid #ffffff;
                border-right: 10px solid #fff;
                width: 15%;
                color: #727272;
            }
            .cell_value {
                border-bottom: 1px solid #dddddd;
                width: 30%;
                border-right: 10px solid #fff;   
                color: #5f5f5f;
            }

Answer 14

यहां तक ​​कि अगर यह एक पुराना सवाल है, तो मैं इस समस्या का समाधान साझा करना चाहूंगा।

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div class="spanned-content">Cell</div>
        </div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan:after {
        /* What to do here? */
        content: "c";
        display: inline;
        visibility: hidden;
    }
    .spanned-content {
        position: absolute;
    }
</style>

यहाँ एक बेला है । यह वास्तव में एक स्पैन नहीं है, और इसका समाधान थोड़ा हैकी है, लेकिन यह कुछ स्थितियों में उपयोगी है। Chrome 46, Firefox 31 और IE 11 पर परीक्षण किया गया।

मेरे मामले में, मुझे स्तंभों की चौड़ाई को ध्यान में रखते हुए और डेटा के उप-वर्गों को शीर्षक देते हुए कुछ गैर-सारणीबद्ध डेटा को सारणीबद्ध तरीके से प्रस्तुत करना पड़ा।

Comments

बेशक, आप हमेशा बूटस्ट्रैप जैसे ग्रिड समाधान पर भरोसा कर सकते हैं। इस विशेष मामले में, मुझे वास्तव में ऑटो-चौड़ाई की आवश्यकता थी जो डिस्प्ले: टेबल प्रदान करता है।

— गेब्रियल

इसके अलावा, यदि आप मसालेदार सामग्री को कुछ पृष्ठभूमि-रंग देना चाहते हैं, तो आपको अपने tr को पूरी मात्रा में tds से भरना होगा :(

— गेब्रियल

मैंने एक टेबल बनाना समाप्त कर दिया, और "सारणीबद्ध डेटा" की मेरी अवधारणा को फिर से परिभाषित किया ^ ^

— गेब्रियल

Answer 15

नेस्टेड टेबल का उपयोग नेस्ट कॉलम स्पैन के लिए करें ...

<div class="table">
  <div class="row">
    <div class="cell">
      <div class="table">
        <div class="row">
          <div class="cell">Cell</div>
          <div class="cell">Cell</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>

या 2 तालिकाओं का उपयोग करें जहां कॉलम की अवधि पूरी पंक्ति को कवर करती है ...

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
</div>

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>

Comments

सवाल यह था कि सीएसएस का उपयोग कैसे किया जाए।

— एननो ग्रॉपर

मुझे खेद है, लेकिन यह एक बहुत बुरा विचार है।

— मदारा का भूत