html - 如何设置高度以填充父节点的高度？

Question

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

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

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

请帮我解决我的问题。

编辑：我使用纯 CSS 而不是 table 元素来提高性能。

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

score 1 · Accepted Answer

表格单元格不能是浮点数。从这个Fiddlefloat: left中的类似内容中删除：.table-cell

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

score 1 · Accepted Answer

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

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

score -2 · Accepted Answer

试试下面的代码

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

3 回答 3