title: making a table using div in HTML
body: <p>I want to make a table like this by using DIV in html &amp; CSS<a href="https://i.stack.imgur.com/kYpxQ.png" rel="nofollow noreferrer">desired result</a>
  but I am having a table like this <a href="https://i.stack.imgur.com/wr97z.png" rel="nofollow noreferrer">gained result</a>
  I tried but could not get the desired result. where I need to change my code? can anyone help me regarding this? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tableMain {
    display: table;
    width: 100%;
    background-color: black;
  }
  
  .tableRow {
    display: table-row;
    color: aqua;
  }
  
  .tableCell,
  .tableHead {
    border: 1px solid aqua;
    display: table-cell;
    padding-left: 5px;
  }
  
  .tableHeading {
    display: table-header-group;
    font-weight: bold;
  }
  
  .tableBody {
    display: table-row-group;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tableMain"&gt;
    &lt;div class="tableBody"&gt;
      &lt;div class="tableRow"&gt;
        &lt;div class="tableCell"&gt;
          &lt;h2&gt;Header-1&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="tableCell"&gt;
          &lt;h2&gt;Header-2&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tableRow"&gt;
        &lt;div class="tableCell"&gt;
          &lt;h2&gt;Section-1&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="tableCell"&gt;
          &lt;h3&gt;Title&lt;/h3&gt;
          &lt;h4&gt;Description&lt;/h4&gt;
          &lt;ul&gt;
            &lt;li&gt;item-1&lt;/li&gt;
            &lt;li&gt;item-2&lt;/li&gt;
            &lt;li&gt;item-3&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tableRow"&gt;
        &lt;div class="tableCell"&gt;
          &lt;h2&gt;Section-2&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tableRow"&gt;
        &lt;div class="tableCell"&gt;
          &lt;h2&gt;header-1&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="tableCell"&gt;
          &lt;h2&gt;header-2&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="tableCell"&gt;
          &lt;h2&gt;header-3&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tableRow"&gt;
        &lt;div class="tableCell"&gt;
          &lt;p&gt;A&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="TableCell"&gt;
          &lt;p&gt;B&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tableCell"&gt;
          &lt;p&gt;C&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tableRow"&gt;
        &lt;div class="tableCell"&gt;
          &lt;p&gt;A&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tableCell"&gt;
          &lt;p&gt;B&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tableCell"&gt;
          &lt;p&gt;C&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tableRow"&gt;
        &lt;div class="tableCell"&gt;
          &lt;p&gt;A&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tableCell"&gt;
          &lt;p&gt;B&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tableCell"&gt;
          &lt;p&gt;C&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>