带分组单元格的CSS表格布局？

问题描述：

我有一个应用程序，我正在使用基于CSS的表来创建一个网格，但有些行有孩子被分组在一个div。有没有什么办法可以使用CSS来获得显示在底部的代码：带分组单元格的CSS表格布局？

C |CCCC|C 
DDDD|D |DDDDD

而不改变节点的结构？谢谢！
参考：http://jsfiddle.net/soney/NRura/

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <style type="text/css"> 
    div.main { 
    display: table; 
    } 
    div.row { 
    display: table-row; 
    } 
    div.cell { 
    display: table-cell; 
    } 
    div.interfere { 
    /* ??? */ 
    } 
    </style> 
    </head> 
<body> 
    <div class="main"> 
    <div class="row"> 
    <div class="cell">C</div> 
    <div class="cell">|CCCC</div> 
    <div class="cell">|C</div> 
    </div> 
    <div class="row"> 
    <div class="cell">DDDD</div> 
    <div class="interfere"> 
    <div class="cell">|D</div> 
    <div class="cell">|DDDDD</div> 
    </div> 
    </div> 
    </div> 
</body> 
</html>

我可以使用表格标签向您展示我的解决方案吗？或者你必须使用div并将它们设置为使用css的表格？ – 2011-01-10 22:03:39

不幸的是，我被困在使用div – soney 2011-01-10 22:15:51

答

我假设：

.interfere { 显示：表细胞; }

，如果你需要的细胞相同的宽度这也将工作：

div.row { 溢出：隐藏; } div.cell display：inline-block; width：200px; } div.interfere { display：inline; }

带分组单元格的CSS表格布局？

相关推荐