顯示：表格單元格邊距

Question

我有2 display: table-cell作為display: table-cell 。 我在他們之間需要一個空間。

margin-left: 5px第二個div的margin-left: 5px無效。

我已經看過 “ 為什么是div帶有” display：table-cell;”了。 不受保證金影響嗎？ 答案，但是我的問題不是關於如何在單元格周圍設置邊框，而是關於混凝土單元格的左邊緣（而不是填充！）（正確的）

將綠色div設置為

display: table;
border-collapse: separate;
border-spacing: 10px;

不僅在單元格之間 ，而且在整個單元格周圍都有空間，即NOK ...

如何進行？

JSFiddle： http : //jsfiddle.net/9cw7rhpu/

Answer 1

嘗試使用Flexbox（ flexbox ）分隔子元素

div.table {
    display: flex;
    justify-content: space-between;
}

JSFiddle

Answer 2

你的意思是那樣嗎？

 div.table { border: solid 2px green; display: table; border-collapse: separate; width: 100%; height: 100px; margin: 10px; background-color: aquamarine; } div.cell { border: solid 4px red; display: table-cell; } #c1 { width: 400px; background-color: blue; } #c2 { width: 200px; background-color: magenta; } 

 <div class="table"> <div class="cell" id="c1"></div> <div class="cell" id="c2"></div> </div> 

Answer 3

如果您需要讓div具有display:table-cell ，則需要使用一種變通方法以實現所需的功能，請參閱“為什么具有“ display：table-cell;”的div不受邊距影響？”

這是為表格單元格設置單個邊距的一種可能的想法：

 div { border-style:solid; border-width:1px; } .table { display:table; border-color:green; width:200px; } .cell { display:table-cell; border-style:none; width:50%; } .cell > div { border-color:red; height:100px; } #c2 > div { margin-left:10px; } 

 <div class="table"> <div id="c1" class="cell"> <div class="inner"></div> </div> <div id="c2" class="cell"> <div class="inner"></div> </div> </div> 

此處的缺點是您必須在表格單元格中放置第二個div（附加標記），並為其設置邊距和邊框，而不是表格單元格。

您可能需要找出一種方法來調整內部div的高度，因為它們不會彼此自動調整高度。

當然，如果您不擔心IE <10，則可以使用flexbox。

Answer 4

為了保持display:table布局，您可以使用透明的邊框和陰影繪制邊框：

 div.table { border:solid; border-width:2px; border-color: green; display: table; border-collapse:separate; border-spacing:0 5px; width: 100%; height: 100px; margin: 10px; background-color: magenta; } div.cell { border:solid; border-width:4px; border-color: red; display: table-cell; } #c1 { width: 400px; background-color: blue; border:0 none; background-clip:padding-box; border-right:5px solid transparent; padding:5px; box-shadow:inset 0 0 0 3px red; } #c2 { width: 200px; background-color: magenta; } 

 <div class="table"> <div class="cell" id="c1"></div> <div class="cell" id="c2"></div> </div> 

http://jsfiddle.net/jf5zt2xh/4/

Answer 5

試試這個解決方案：

HTML：

<div class="table">
  <div class="col">
    Column 1
  </div>
  <div class="col">
    Column 2
  </div>
</div>

CSS：

.table {
    display: table;
    border-collapse: separate;
    border-spacing: 25px; 
    width: calc(100% + 50px); 
    margin-left: -25px;
}
.col {
    display: table-cell;
}