如何设置高度来填充父节点的高度？

Question

我想尝试使用纯CSS和div / span元素制作HTML表格。我目前有以下jsFiddle。表格单元格......

 .table .table-cell {
      float: left;
      padding: 0 10px;
      border: 1px solid #000;
      display: table-cell;
 }

...元素不会填充父行的高度。

请帮我解决我的问题。

编辑：我使用纯CSS代替表格元素以提高性能。

EDIT2 ：是否可以模拟colSpan和rowSpan？

Answer 1

表格细胞不能漂浮。从此Fiddle中的float: left中删除.table-cell：

.table .table-cell {
    /* float: left; */
    padding: 0 10px;
    border: 1px solid #000;
    display: table-cell;
}

Answer 2

尝试这个而不是你的风格：

.table .table-cell {
      padding: 0 10px;
      border: 1px solid #000;
      display: table-cell;
 }

Answer 3

尝试以下代码

.table .table-cell {
    float: left;
    padding: 0 10px;
    border: 1px solid #000;
    display: table-cell;
    height: 100%;
}