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

我的外部 div 带有 display: table; border-collapse: collapse; 和带有 display: table-cell 的单元格为什么仍然不折叠？我在这里错过了什么？

顺便说一下，一列中的单元格数量可能不定，所以我不能只在一侧设置边框。

Answer 1

使用简单的负边距而不是使用 display: table。

在 fiddle 中更新 JS Fiddle

.container { 
    border-style: solid;
    border-color: red;
    border-width: 1px 0 0 1px;
    display: inline-block;
}
.column { 
    float: left;
    overflow: hidden; 
}
.cell { 
    border: 1px solid red;
    width: 120px;
    height: 20px; 
    margin: -1px 0 0 -1px;
}
.clearfix {
    clear:both;
}