Wie lässt man Grenzen (bei einem Div) kollabieren?
Angenommen, ich habe Markup wie:http://jsfiddle.net/R8eCr/1/
<div class="container">
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
...
</div>
Dann CSS
.container {
display: table;
border-collapse: collapse;
}
.column {
float: left;
overflow: hidden;
width: 120px;
}
.cell {
display: table-cell;
border: 1px solid red;
width: 120px;
height: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Ich habe die äußere div mitdisplay: table; border-collapse: collapse;
und Zellen mitdisplay: table-cell
warum kollabieren sie immer noch nicht? Was vermisse ich hier?
Übrigens gibt es vielleicht eine variable Anzahl von Zellen in einer Spalte, so dass ich nicht nur Ränder auf einer Seite haben kann.