如何在设置为显示表格单元格的div之间添加边距？

Question

我设置一个父div显示:table及其显示的三个子div:inline-cell.这三个子div是水平堆叠的,我在三个子div上设置了三个像素的边框.我如何在子div之间添加边距,以便将空间放在边框外部而不是内部？

Answer 1

你的css无效:"display:inline-cell"不是有效的css声明.您将需要使用"display:table-cell".如果您希望它们堆叠在彼此之上,也可以完成,则需要将每个"表格单元格"包装成"表格行".

HTML

<div class="table">
    <div class="tableRow">
      <div class="tableCell">Cell 1</div>
    </div>
    <div class="tableRow">
      <div class="tableCell">Cell 2</div>
    </div>
    <div class="tableRow">
      <div class="tableCell">Cell 3</div>
    </div> 
</div>

CSS

.table{
border: 2px solid #999;
display: table;
border-spacing: 15px;
}
.tableRow{
    display: table-row;
}
.tableCell{
    border: 3px solid #333;
    border-collapse: separate;
    display: table-cell;
    border-collapse: separate;    
}