How do DIV and CSS work with Rowspan & Colspan?

Question

I learned a few days on how to use a div to create table cells and merge cells. In fact, I can do this with TABLE, but I can’t do the same screen result in DIV, hope someone can help me manage me better or fix the code.

In fact, I want to make all cells with the same width and height (except for the merged area) in full screen mode, but the problem was in the merged cell in the center. I tried many methods, I can not get it to work, like the TABLE style.

Here is the result that I want, but I will do with the table:

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

And this is the code I'm currently doing for the DIV version, but could not balance the whole width and height in full screen mode.

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

JSFiddle table version

DIV Version JSFiddle

Wish someone could fix the code!

Answer 1

Try adding another class to the joined column, for example:

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

and change the css of the merged scope, for example:

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

The reason I did this was because you had the same class in your combined area, but you wanted the size to take up twice as much space as a normal cell. Thus, all I did was add an extra class that changes the width and height of the merged area to get the desired result.

Here is the updated Fiddle:

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