CSS table layout: why does table-row not accept a margin?
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
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;
}