Comment faire en sorte que les bordures s'effondrent (sur un div) ?

Question

Supposons que j'ai un balisage comme : 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>

Puis 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;
}

J'ai un div externe avec display: table; border-collapse: collapse; et les cellules avec display: table-cell pourquoi ne s'effondrent-ils toujours pas ? Qu'est-ce que je rate ici ?

D'ailleurs, le nombre de cellules d'une colonne peut être variable, de sorte que je ne peux pas avoir des bordures d'un seul côté.

Answer 1

Pourquoi ne pas utiliser les contours ? C'est ce que vous voulez. outline:1px solid red ;

Answer 2

Exemple d'utilisation border-collapse : separate ; comme

• conteneur affiché sous forme de tableau :

  ol[type="I"]>li{
    display: table;
    border-collapse: separate;
    border-spacing: 1rem;
  }