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

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？下面的代码

Answer 1

尝试

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

Answer 2

表细胞不能floatet。从.table-cell想在这个Fiddle删除float: left：

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

Answer 3

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

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