Jak DIV i CSS współpracują z Rowspan i Colspan?

Question

Przestudiowałem kilka dni, jak używać div do tworzenia komórek tabeli i scalania komórek. Właściwie mogłem to zrobić z TABELĄ, ale nie mogę zrobić tego samego wyniku na ekranie w DIV, mam nadzieję, że ktoś może pomóc mi w kierowaniu lepszą metodą lub napraw kod.

W rzeczywistości chcę, aby wszystkie komórki w tej samej szerokości i wysokości (z wyjątkiem obszaru scalonego) w trybie pełnoekranowym, ale problemem była połączona komórka w środku. Próbowałem wielu metod nie może sprawić, aby działał jak styl TABLE.

Oto wynik chcę, ale zrobić z tabeli:

<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> 

I jest to kod I obecnie czyni dla wersji DIV, ale bez powodzenia do zrównoważonego całej szerokości i wysokości na pełnym ekranie.

<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

Życzenie ktoś może naprawić kod!

Answer 1

spróbować dodać inną klasę do połączonego kolumny tak:

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

i zmienić css obszaru scalonego, tak jak poniżej:

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

Powodem Zrobiłem to dlatego, że miał tę samą klasę na scalonym obszarze, ale chciałeś, aby rozmiar zajmował dwukrotnie więcej miejsca niż normalna komórka. Więc wszystko, co zrobiłem, to dodać dodatkową klasę zmieniającą szerokość i wysokość scalonego obszaru, aby uzyskać pożądany wynik.

Oto zaktualizowana Fiddle:

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