CSS display table and colspan

Question

I try to use CSS table, this is my simple html structure :

<div id="main-table">
  <div id="header-group">
    <h1>This is a test</h1>
  </div>
  <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sustulisti detraxisse reperietur perfruique inpendente delectamur admonere plato remissius. Praetor corporis nutu debilitatem seditiones illis, certissimam quia ignorare referri aliquos privatione maximam chrysippi, mnesarchum veniat habere solemus electram verterunt pluribus, iudex magnopere cn ac duxit conformavit attico expetitur, confirmare insidiarum plena acri patiatur liberae. Numquam clariora, volunt.</div>
  <div id="aside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Gaudere similia nam suscipit cedentem dictas. Satis.</div>
</div>

But here the trick, i set my #header-group with a display: table-header-group (same for table-row). And the behavior of his child is like a display: table-cell. But I want him to take the whole width of his parent. In html this would be a colspan attribute. But Is there a way to do that in CSS ?

You can see the behavior on this link (the red should take the whole width) : http://codepen.io/anon/pen/rxpBye

Cheers,

Answer 1

Helo H4mm3r,

I just wrap your yellow and green cell with a <div id="container"> with the property display:block.

div#main-table {
  display: table;
}

div#header-group {
  background: red;
 display: table-header-group;
}

#container{
  display:block;
}

div#content, div#aside {
  display: table-cell;
}

div#content {
  background: yellow;
}

div#aside {
  background: green;
}

<div id="main-table">
  <div id="header-group">
    <h1>This is a test</h1>
  </div>
  <div id="container">
  <div id="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sustulisti detraxisse reperietur perfruique inpendente delectamur admonere plato remissius. Praetor corporis nutu debilitatem seditiones illis, certissimam quia ignorare referri aliquos privatione maximam chrysippi, mnesarchum veniat habere solemus electram verterunt pluribus, iudex magnopere cn ac duxit conformavit attico expetitur, confirmare insidiarum plena acri patiatur liberae. Numquam clariora, volunt.</div>
  <div id="aside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Gaudere similia nam suscipit cedentem dictas. Satis.</div>
</div>

Answer 2

Try this:

div#header-group {
    background: red;
    display: table-caption;
}