title: How DIV & CSS work with Rowspan & Colspan?
body: <p>I have studied few days about how to use div to create table cells and merge cells, Actually I can did this with TABLE, but can't do the same screen result in DIV, hope someone can help me drive me the better method or fix the code.</p>
  
  <p>Actually, I want to make all the cells in same Width and Height (Except the Merged Area) in the full screen mode, but the problem was the merged cell at center.  I tried many methods cannot make it working like the TABLE style.</p>
  
  <p>Here is the result I want, but make with table:</p>
  
  <pre><code>&lt;style&gt;
  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%;
  }
  &lt;/style&gt;
  &lt;table class='w100'&gt;
      &lt;tr&gt;
          &lt;td class='w25'&gt;D&lt;/td&gt;
          &lt;td class='w25'&gt;E&lt;/td&gt;
          &lt;td class='w25'&gt;F&lt;/td&gt;
          &lt;td class='w25'&gt;G&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='w25'&gt;C&lt;/td&gt;
          &lt;td class='w50' colspan=2 rowspan=2 &gt;MERGED AREA&lt;/td&gt;
          &lt;td class='w25'&gt;H&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='w25'&gt;B&lt;/td&gt;
          &lt;td class='w25'&gt;I&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class='w25'&gt;A&lt;/td&gt;
          &lt;td class='w25'&gt;L&lt;/td&gt;
          &lt;td class='w25'&gt;K&lt;/td&gt;
          &lt;td class='w25'&gt;J&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And this is the code I currently making for DIV version, but no success to balanced all the the width and height in full screen.</p>
  
  <pre><code>&lt;style&gt;
  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;
  }
  &lt;/style&gt;
  &lt;div class='table'&gt;
      &lt;div class='row'&gt;
          &lt;div class='cell' style="max-width:25%;"&gt;D&lt;/div&gt;
          &lt;div class='intable'&gt;
              &lt;div class='cell'&gt;E&lt;/div&gt;
              &lt;div class='cell'&gt;F&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='cell'&gt;G&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='row'&gt;
        &lt;div class='intable'&gt;
          &lt;div class='row'&gt;
            &lt;div class='cell'&gt;C&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='row'&gt;
            &lt;div class='cell'&gt;B&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class='cell'&gt;Merged Area&lt;/div&gt;
        &lt;div class='intable'&gt;
          &lt;div class='row'&gt;
            &lt;div class='cell'&gt;H&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='row'&gt;
            &lt;div class='cell'&gt;I&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='row'&gt;
          &lt;div class='cell'&gt;A&lt;/div&gt;
          &lt;div class='intable'&gt;
              &lt;div class='cell'&gt;L&lt;/div&gt;
              &lt;div class='cell'&gt;K&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class='cell'&gt;J&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/KagaTei/h4twub77/" rel="noreferrer">Table Version JSFiddle</a></p>
  
  <p><a href="https://jsfiddle.net/KagaTei/6hx2uooz/" rel="noreferrer">DIV Version JSFiddle</a></p>
  
  <p>Wish somebody can fix the code!</p>