css - (divで)境界線を折りたたむ方法は?

Question

次のようなマークアップがあるとします: 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>

次に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;
}

外側の divdisplay: table; border-collapse: collapse;とセルがありますが、display: table-cellなぜそれらがまだ折りたたまれていないのですか? ここで何が欠けていますか？

ちなみに、列にはさまざまな数のセルが存在する可能性があるため、片側だけに境界線を設定することはできません。

Answer 1

代わりにborderuseを使用しbox-shadowます。

  box-shadow: 
    2px 0 0 0 #888, 
    0 2px 0 0 #888, 
    2px 2px 0 0 #888,   /* Just to fix the corner */
    2px 0 0 0 #888 inset, 
    0 2px 0 0 #888 inset;

デモ: http://codepen.io/Hawkun/pen/rsIEp

Answer 2

display: table-row列の代わりに使用する必要がありfloat: left;、明らかに@Hushmeがtoを修正するdiaplay: table-cellようにdisplay: table-cell;

 .container {
    display: table;
    border-collapse: collapse;
}
.column {
    display: table-row;
    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;
}

デモ

Answer 3

なぜアウトラインを使わないのですか？それはあなたが望むものです Outline:1px 単色の赤;