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

Question

我设置了一个父 div 来显示：table 和它各自的三个子 div 来显示：inline-cell。这三个子 div 是水平堆叠的，我在三个子 div 上设置了三个像素的边框。我将如何在子 div 之间添加边距，以便将空间放在边框的外侧而不是内侧？

Answer 1

您的 css 无效：“display: inline-cell”不是有效的 css 声明。您将需要改用“显示：表格单元格”。如果您希望它们彼此堆叠，也可以这样做，您需要将每个“表格单元格”包装成一个“表格行”。

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