假设我有标记像:
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>@H_403_4@然后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; }@H_403_4@我有外部div与显示:表; border-collapse:collapse;和细胞与显示:表细胞为什么他们仍然不崩溃?我在这里失踪了什么? @H_403_4@顺便说一下,在列中可能有可变数量的单元格,所以我不仅可以在一边有边框。
解决方法
这里是一个
demo
@H_403_4@首先你需要纠正你的语法错误
display: table-cell;@H_403_4@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; }