CSS表格佈局：爲什麼表格行不接受保證金？

Question

.container { 
 
    width: 850px; 
 
    padding: 0; 
 
    display: table; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.row { 
 
    display: table-row; 
 
    margin-bottom: 30px; 
 
    /* HERE */ 
 
} 
 
.home_1 { 
 
    width: 64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 
.home_2 { 
 
    width: 350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
} 
 
.home_3 { 
 
    width: 64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 
.home_4 { 
 
    width: 350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="home_1"></div> 
 
    <div class="home_2"></div> 
 
    <div class="home_3"></div> 
 
    <div class="home_4"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="home_1"></div> 
 
    <div class="home_2"></div> 
 
    </div> 
 
</div>

我的問題是相對以線條爲標誌HERE在CSS。我發現行相互靠得太近，所以我試圖添加一個底部邊距來分隔它們。不幸的是它不起作用。我必須添加邊距到表格單元格來分隔行。

這種行爲背後的原因是什麼？

而且，它是確定使用此策略進行布點，因爲我做的：

[icon] - text  [icon] - text 
[icon] - text  [icon] - text 

或者是有一個更好的策略？

Answer 1

請參閱CSS 2.1標準，第17.5.3節。當您使用display:table-row時，DIV的高度完全由其中的table-cell元素的高度決定。因此，這些元素的邊距，填充和高度不起作用。

http://www.w3.org/TR/CSS2/tables.html

Answer 2

您是否嘗試將底部邊距設置爲.row div即您的「單元格」？ 使用實際的HTML表格時，不能將邊距設置爲行，也只能將其設置爲單元格。

Answer 3

我見過最接近的事是設置​​到div容器。然而，這隻會讓我在桌子的上邊緣留下空間，因爲你希望保留底部，所以這打破了目的。

Answer 4

這是如何工作（使用實際的表）？

table { 
    border-collapse: collapse; 
} 
tr.row { 
    border-bottom: solid white 30px; /*change "white" to your background color*/ 
} 

這不是動態的，因爲你必須明確地設置邊框的顏色（除非有周圍太的方式），但是這是我對我自己的項目實驗。

編輯包括評論關於 「透明」：

tr.row { 
    border-bottom: 30px solid transparent; 
} 

Answer 5

Fiddle

.row-seperator{ 
    border-top: solid transparent 50px; 
} 

<table> 
    <tr><td>Section 1</td></tr> 
    <tr><td>row1 1</td></tr> 
    <tr><td>row1 2</td></tr> 
    <tr> 
     <td class="row-seperator">Section 2</td> 
    </tr> 
    <tr><td>row2 1</td></tr> 
    <tr><td>row2 2</td></tr> 
</table> 


#Outline 
Section 1 
row1 1 
row1 2 


Section 2 
row2 1 
row2 2 

這可能是另一種解決方案

Answer 6

有這個一個非常簡單的修復程序，border-spacing和border-collapse CSS屬性可用於display: table;

您可以使用以下方法獲取單元格中的填充/邊距。

.container { 
 
    width: 850px; 
 
    padding:0; 
 
    display: table; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-collapse: separate; 
 
    border-spacing: 15px; 
 
} 
 

 
.row { 
 
    display: table-row; 
 
} 
 

 
.home_1 { 
 
    width:64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 

 
.home_2 { 
 
    width:350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align:middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
} 
 

 
.home_3 { 
 
    width:64px; 
 
    height: 64px; 
 
    padding-right: 20px; 
 
    margin-right: 10px; 
 
    display: table-cell; 
 
} 
 

 
.home_4 { 
 
    width: 350px; 
 
    height: 64px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
    font-size: 150%; 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="home_1">Foo</div> 
 
     <div class="home_2">Foo</div> 
 
     <div class="home_3">Foo</div> 
 
     <div class="home_4">Foo</div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="home_1">Foo</div> 
 
     <div class="home_2">Foo</div> 
 
    </div>

請注意，您必須向有

border-collapse: separate; 

否則將無法正常工作。

Answer 7

在工作的div之間添加br標籤。在正在顯示的兩個div之間添加br標記：在具有顯示的父級中的錶行：表