html - 表格单元格和表格页脚组

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;
}

基本上我希望绿色页脚延伸到蓝色 ID 的末尾。在绿色页脚和黄色 ID 之间也是 10 像素而不是 5 像素。我究竟做错了什么 ？

Answer 1

我用过grid你的情况，还有grid-gap一段5px距离：

#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

我对页眉组和页脚组都有同样的问题。我通过在我的桌子周围放置一个指定基本宽度的容器来解决这个问题。在里面我放了一个带有 display: table 属性的 div 如下

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

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

.tDataRow {
    display: table-row;
  }

.tDataRow span{
    display: table-cell;
  }

我没有使用 table-header 或 table-footer 而是单独定义它们：

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

并且元素结构如下：

<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>

我希望其他人有一个更整洁的解决方案，但我无法让页眉和页脚完全适合，甚至标题列也无法与数据对齐

结果：

结果表样本