Table-cell and table-footer-group

Question

http://jsfiddle.net/hqu8N/

<div id="container">
    <div id="one"><p>one</p></div>
    <div id="two"><p>two</p></div>
    <div id="footer"><p>footer</p></div>
</div>

#container {
    display: table;
    width: 200px;
    height: 200px;
    background-color: red;
    border-spacing: 5px;
}

#one {
    display: table-cell;
    background-color: yellow;
}

#two {
    display: table-cell;
    background-color: blue;
}

#footer {
    display: table-footer-group;
    background-color: green;
}

Basically i want the green footer to extend over to the end of the blue ID. And also between the green footer and the yellow ID it's 10 px of space instead of 5px. What am i doing wrong ?

Answer 1

I used grid for your case, and a grid-gap for a 5px distance:

#container {
  display: grid;
  grid-gap: 5px;
  width: 200px;
  height: 200px;
  background-color: red;
}

#one {
  background-color: yellow;
}

#two {
  background-color: blue;
}

#footer {
  background-color: green;
  grid-column: 1 / 3;
}

<div id="container">
  <div id="one">
    <p>one</p>
  </div>
  <div id="two">
    <p>two</p>
  </div>
  <div id="footer">
    <p>footer</p>
  </div>
</div>

https://jsfiddle.net/arman1373/4xkgd5Lj/

Answer 2

I had the same issue with both the header-group and footer-group. I solved this by putting a container around my table which specified the basic width. Inside that I put a div with display: table properties as below

#tContainer {
  width: 80%;
  margin; 0% auto;
  }

#tData {
  display: table;
  width: 100%
  }

.tDataRow {
    display: table-row;
  }

.tDataRow span{
    display: table-cell;
  }

I didn't use table-header or table-footer but defined them separately:

.tDataFooter {
  display: block;
  width: auto;
  }

And the element structure as follows:

<div id="tContainer">
 <div id="tData">
  <div class="tDataRow"><span class="dHeader"> xyz </span></div>
  <div class="tDataRow"><span> data sets repeat </span></div>
 </div>
  <div class="tDataFooter"> Footer data </div>
</div>

I am hoping someone else has a neater solution but I couldn't get the header and footer to fit at all, not even the header columns to align with the data

Result:

Resulting table sample