title: asymmetrical rows and columns in table with div's
body: <p>I am using divs to make tables (div's because I had some complicated design).
  I want to my first row to have multiple columns and second row is just a single row which spans through the whole row and next row is again a multiple column row.</p>
  
  <p>This first row, second row is not static, its dynamically decided from data.</p>
  
  <p>My css:</p>
  
  <pre><code>#table-holder {
      margin: 0 auto;
      display: table;
      border: solid 2px #b7ddf2;
      background: #ebf4fb;
      font-family: Verdana, Geneva, sans-serif;
  }
  
  #row {
      display: table-row;
      border: solid 2px #b7ddf2;
      padding: 2px 2px 2px 2px;
  }
  
  #column {
      display: table-cell;
      border: solid 2px #b7ddf2;
      padding: 2px 2px 2px 2px;
  }
  </code></pre>
  
  <p>my html:</p>
  
  <pre><code>&lt;div id="table-holder"&gt;
    &lt;div id="row"&gt;
      &lt;div id="column"&gt;
      &lt;/div&gt;
      &lt;div id="column"&gt;
      &lt;/div&gt;
      &lt;div id="column"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="random"&gt;
        I want this to span for my whole row, instead of just 1st column.
    &lt;/div&gt;
    &lt;div id="row"&gt;
      &lt;div id="column"&gt;
      &lt;/div&gt;
      &lt;div id="column"&gt;
      &lt;/div&gt;
      &lt;div id="column"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>any ideas ?</p>
  
  <p>Thank you</p>