如何在设置为显示表格单元格的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;    
}