Jak sprawić, aby obramowanie było zwinięte (na div)?
Załóżmy, że mam znaczniki takie jak: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>
Następnie 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;
}
Mam zewnętrzny div zdisplay: table; border-collapse: collapse;
i komórki zdisplay: table-cell
dlaczego wciąż się nie zawalają? Czego mi tu brakuje?
Swoją drogą może być zmienna liczba komórek w kolumnie, więc nie mogę mieć tylko granic po jednej stronie.