如何在設置爲顯示錶格單元的div之間添加邊距？

Question

我設置了一個父div來顯示：table及其相應的三個子div來顯示：inline-cell。這三個子div是水平堆疊的，我在三個子div上設置了三個像素的邊界。我將如何去增加孩子divs之間的邊距，以便將空間放在邊界外部而不是內部？

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