帶分組單元格的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>

來源

2011-01-10 soney

我可以使用表格標籤向您展示我的解決方案嗎？或者你必須使用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; }

來源

2011-01-10 22:05:38 Terminalpunk

帶分組單元格的CSS表格佈局？

回答

相關問題