title: Embed a div table within a div table
body: <p>I would like to achieve the following layout in HTML using div tags instead of table tags (the colouring is just to make it more clear which cells I want to have equal width):</p>
  
  <p><a href="https://i.stack.imgur.com/fKCHX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fKCHX.png" alt="enter image description here"></a></p>
  
  <p>That is, I would like to be able to unfold a table layout within another table layout using only div tags. Is that possible?</p>
  
  <p>Below here I have included one of my experiments. As you can see the first column is getting too wide. The inner table does not span the entire width.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table {
    display: table;
    border-collapse: collapse;
  }
  .row {
    display: table-row;
    border-collapse: collapse;
  }
  .cell {
    display: table-cell;
    border-collapse: collapse;
    padding: 2px 6px;
  }
  .yellow {
    background-color: #ffdb4d;
  }
  .orange {
    background-color: #ffa64d;
  }
  .red {
    background-color: #ff6666;
  }
  .purple {
    background-color: #b800e6;
  }
  .blue {
    background-color: #66b3ff;
  }
  .green {
    background-color: #70db70;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="table"&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell yellow"&gt;cell11&lt;/div&gt;
      &lt;div class="cell orange"&gt;cell21&lt;/div&gt;
      &lt;div class="cell red"&gt;cell31&lt;/div&gt;
      &lt;div class="cell purple"&gt;cell41&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell yellow"&gt;cell12&lt;/div&gt;
      &lt;div class="cell orange"&gt;cell22&lt;/div&gt;
      &lt;div class="cell red"&gt;cell32&lt;/div&gt;
      &lt;div class="cell purple"&gt;cell42&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell yellow"&gt;cell13&lt;/div&gt;
      &lt;div class="cell orange"&gt;cell23&lt;/div&gt;
      &lt;div class="cell red"&gt;cell33&lt;/div&gt;
      &lt;div class="cell purple"&gt;cell43&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="table"&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell blue"&gt;Some text:&lt;/div&gt;
        &lt;div class="cell green"&gt;blah blah&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="cell blue"&gt;Some other text:&lt;/div&gt;
        &lt;div class="cell green"&gt;blah blah blah&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell yellow"&gt;cell15&lt;/div&gt;
      &lt;div class="cell orange"&gt;cell25&lt;/div&gt;
      &lt;div class="cell red"&gt;cell35&lt;/div&gt;
      &lt;div class="cell purple"&gt;cell45&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell yellow"&gt;cell16&lt;/div&gt;
      &lt;div class="cell orange"&gt;cell26&lt;/div&gt;
      &lt;div class="cell red"&gt;cell36&lt;/div&gt;
      &lt;div class="cell purple"&gt;cell46&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>