CSS Table layout with grouped cells?_问答_开发者

开发者 https://www.devze.com 2023-02-03 07:04 出处：网络

I have an application where I\'m using CSS-based t开发者_JAVA技巧ables to create a grid, but some rows have children that are grouped inside of a div. Is there any way to use CSS to get the code shown

相关专题：css css-tables

I have an application where I'm using CSS-based t开发者_JAVA技巧ables to create a grid, but some rows have children that are grouped inside of a div. Is there any way to use CSS to get the code shown at the bottom to display:

C   |CCCC|C
DDDD|D   |DDDDD

without changing the structure of the nodes?

For reference: 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>

I would assume :

.interfere { display:table-cell; }

This will also work if you need the cells the same width :

div.row { overflow:hidden; } div.cell { display:inline-block; width:200px; } div.interfere { display:inline; }