कैसे पंक्ति और सीएसएस Rowspan और Colspan के साथ काम करते हैं?

Question

मैंने टेबल कोशिकाओं को बनाने और कोशिकाओं को मर्ज करने के लिए div का उपयोग करने के बारे में कुछ दिनों का अध्ययन किया है, असल में मैं इसे तालिका के साथ कर सकता हूं, लेकिन डीआईवी में एक ही स्क्रीन परिणाम नहीं कर सकता, उम्मीद है कि कोई मुझे बेहतर तरीके से ड्राइव करने में मदद कर सकता है या कोड को ठीक करें।

दरअसल, मैं पूर्ण स्क्रीन मोड में सभी कोशिकाओं को समान चौड़ाई और ऊंचाई (मर्ज किए गए क्षेत्र को छोड़कर) बनाना चाहता हूं, लेकिन समस्या केंद्र में विलयित सेल थी। मैंने कोशिश की कि कई विधियां इसे टेबल शैली की तरह काम नहीं कर सकती हैं।

यहाँ परिणाम मैं चाहता है, लेकिन तालिका के साथ करते हैं:

<style> 
html, body{ 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
table { 
    border-width: 1px 1px 0px 0px; 
    border-spacing:0; 
    margin:0; 
    padding:0; 
    width: 100%; 
    height: 100%; 
} 
td { 
    border-width: 0px 0px 1px 1px; 
} 
table, td { 
    border-style: solid; 
    border-color: purple; 
} 
.w25 { 
    width:25%; 
    height:25%; 
} 
.w50 { 
    width:50%; 
    height:50%; 
} 
.w100 { 
    width:100%; 
    height:100%; 
} 
</style> 
<table class='w100'> 
    <tr> 
     <td class='w25'>D</td> 
     <td class='w25'>E</td> 
     <td class='w25'>F</td> 
     <td class='w25'>G</td> 
    </tr> 
    <tr> 
     <td class='w25'>C</td> 
     <td class='w50' colspan=2 rowspan=2 >MERGED AREA</td> 
     <td class='w25'>H</td> 
    </tr> 
    <tr> 
     <td class='w25'>B</td> 
     <td class='w25'>I</td> 
    </tr> 
    <tr> 
     <td class='w25'>A</td> 
     <td class='w25'>L</td> 
     <td class='w25'>K</td> 
     <td class='w25'>J</td> 
    </tr> 
</table> 

और यह कोड मैं वर्तमान में DIV संस्करण के लिए कर रही है, लेकिन पूर्ण स्क्रीन में संतुलित सभी चौड़ाई और ऊंचाई के लिए कोई सफलता है।

<style> 
html, body{ 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.table { 
    border-width: 1px 1px 0px 0px; 
} 
.intable { 
    border-width: 0px 1px 0px 0px; 
} 
.table, .intable { 
    display:table; 
    width:100%; 
    height:100%; 
} 
.cell { 
    display:table-cell; 
} 
.row { 
    display:table-row; 
} 
.cell { 
    border-width: 0px 0px 1px 1px; 
    width:25%; 
} 
.table, .intable, .cell { 
    border-style: solid; 
    border-color: purple; 
} 
</style> 
<div class='table'> 
    <div class='row'> 
     <div class='cell' style="max-width:25%;">D</div> 
     <div class='intable'> 
      <div class='cell'>E</div> 
      <div class='cell'>F</div> 
     </div> 
     <div class='cell'>G</div> 
    </div> 
    <div class='row'> 
     <div class='intable'> 
     <div class='row'> 
      <div class='cell'>C</div> 
     </div> 
     <div class='row'> 
      <div class='cell'>B</div> 
     </div> 
     </div> 
     <div class='cell'>Merged Area</div> 
     <div class='intable'> 
     <div class='row'> 
      <div class='cell'>H</div> 
     </div> 
     <div class='row'> 
      <div class='cell'>I</div> 
     </div> 
     </div> 
    </div> 
    <div class='row'> 
     <div class='cell'>A</div> 
     <div class='intable'> 
      <div class='cell'>L</div> 
      <div class='cell'>K</div> 
     </div> 
     <div class='cell'>J</div> 
    </div> 
</div> 

Table Version JSFiddle

DIV Version JSFiddle

विश किसी कोड को ठीक कर सकते हैं!

Answer 1

तो की तरह, अपने मर्ज किए गए स्तंभ के लिए एक और वर्ग जोड़ने का प्रयास करें:

<div class='cell merged'>Merged Area</div> 

और मर्ज किए गए क्षेत्र के सीएसएस बदल सकता है इसलिए की तरह:

.merged{ 
    width:50%; 
    height:50%; 
} 

कारण मैं ऐसा किया क्योंकि आप है आपके विलय क्षेत्र पर एक ही कक्षा थी, लेकिन आप चाहते थे कि आकार सामान्य सेल की जगह को दोगुना कर ले। तो मैंने वांछित परिणाम प्राप्त करने के लिए विलय क्षेत्र की चौड़ाई और ऊंचाई को बदलने के लिए एक अतिरिक्त कक्षा जोड़ दी थी।

https://jsfiddle.net/6hx2uooz/4/