Question

我有一个应用程序，我使用基于CSS的表来创建网格，但有些行有子组在div中。有没有办法使用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>

Answer 1

我会假设：

.interfere { 显示：表细胞; }

如果您需要相同宽度的单元格，这也可以使用：

div.row { 溢出：隐藏; } div.cell { 显示：内联块; 宽度：200像素; } div.interfere { 显示：内联; }

CSS表格布局与分组单元格？

1 个答案: