CSS table layout: why does table-row not accept a margin?

.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>

My question is relative to the line marked HERE in the CSS. I found out that the rows are too near to each other, so I tried to add a bottom margin to separate them. Unfortunately it does not work. I have to add the margins to the table cells to separate the rows.

What is the reason behind this behavior?

Also, is it ok to use this strategy to perform layouting as I am doing:

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

or is there a better strategy?

123270 次浏览
小开

Have you tried setting the bottom margin to .row div, i.e. to your "cells"? When you work with actual HTML tables, you cannot set margins to rows, too - only to cells.

小开
最佳答案

See the CSS 2.1 standard, section 17.5.3. When you use display:table-row, the height of the DIV is solely determined by the height of the table-cell elements in it. Thus, margin, padding, and height on those elements have no effect.

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

小开

The closest thing I've seen would be to set border-spacing: 0 30px; to the container div. However, this just leaves me with space on the upper edge of the table, which defeats the purpose, since you wanted margin-bottom.

小开

How's this for a work around (using an actual table)?

table {
border-collapse: collapse;
}


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

It's not as dynamic, since you have to explicitly set the color of the border (unless there's a way around that too), but this is something I'm experimenting with on a project of my own.

Edit to include comments regarding transparent:

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

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

this can be another solution

小开

There is a pretty simple fix for this, the border-spacing and border-collapse CSS attributes work on display: table.

You can use the following to get padding/margins in your cells. 

.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>
</div>

Note that you have to have 

border-collapse: separate;

Otherwise it will not work.

小开

adding a br tag between the divs worked. add br tag between two divs that are display:table-row in a parent with display:table

小开

Add spacer span between two elements, then make it unvisible:

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>


.spacer {
visibility: hidden
}
小开

Works - Add Spacing To Table

#options table {
border-spacing: 8px;
}
小开

If you want a specific margin e.g. 20px, you can put the table inside a div.

<div id="tableDiv">
<table>
<tr>
<th> test heading </th>
</tr>
<tr>
<td> test data </td>
</tr>
</table>
</div>

So the #tableDiv has a margin of 20px but the table itself has a width of 100%, forcing the table to be the full width except for the margin on either sides.

#tableDiv {
margin: 20px;
}


table {
width: 100%;
}

提交答案