CSS Table layout with grouped cells?
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; }
加载中,请稍侯......
精彩评论