如何使边界崩溃（在div）？ [英] How to make borders collapse (on a div)?

问题描述

假设我有标记： 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 的单元格为什么它们还没有折叠？我在这里缺少什么？

I have the outer div with display: table; border-collapse: collapse; and cells with display: table-cell why do they still not collapse? What am I missing here?

顺便说一句，列中可能有可变数量的单元格，所以我不能只在一边有边框。

By the way there maybe variable number of cells in a column so I can't only have borders on one side.

推荐答案

这里是一个演示

首先你需要纠正你的语法错误它

first you need to correct your syntax error its

display: table-cell;

不是 diaplay：table-cell; / p>

not diaplay: table-cell;

   .container {
    display: table;
    border-collapse:collapse
}
.column {
    display:table-row;
}
.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）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！