title: What is the analog of colspan when use display: table; in CSS?
body: <p>The task is pretty strange. I have to create html table <strong>BUT</strong> I'm not allowed to use traditional <code>&lt;table&gt;</code> tag. My table should look like this:<img src="https://i.stack.imgur.com/spepQ.png" alt="enter image description here"></p>
  
  <p>It would be easy to do it like below:</p>
  
  <pre><code>&lt;table&gt;
       &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
           &lt;td colspan="5"&gt;&lt;/td&gt;
       &lt;/tr&gt;
       ...
  </code></pre>
  
  <p></p>
  
  <p>but, as I said, I'm not allowed to use traditional table tags (<code>table</code>, <code>tr</code>, <code>td</code>, <code>th</code>). Here is <a href="http://jsfiddle.net/L7Fp9/" rel="nofollow noreferrer">JSFIddle</a> of what I have at the moment. How can I get the same result as with <code>&lt;td colspan="5"&gt;&lt;/td&gt;</code> <strong>but</strong> using only divs and CSS.</p>
  
  <p><strong>EDITS:</strong><br/>
  * Table cell's width in one row must not be fixed, it should be dynamic and it should be possible to make them (cells) different width (in one row).<br/>
  * Table cell's width in <strong>different rows</strong> of the <strong>same column</strong> must be <strong>equal</strong>. Like in traditional table. Only "colspanned" cell's width must be different.<br/></p>