Spaces Between Table Rows In IE7/8

Question

I would like there to be spaces between rows of my table in IE7/8. I did this:

.selector tr {
    display: block;
    padding-bottom: 3px;
}

Which works in Firefox but not in IE7/8 where the 3px gap doesn't appear.

Answer 1

Why not do:

.selector tr td {
    display: block;
    padding-bottom: 3px;
}

If you're also using <th> tags then do:

.selector tr td, .selector tr th {
    display: block;
    padding-bottom: 3px;
}

You should not need that display: block; rule, but perhaps it's overriding something else you have in your stylesheets.

Answer 2

Even if this may work in some browsers, changing the display of a table row feels like an awful hack. Don't do it.

The only valid, cross-browser way that I know of is to give each td some padding-bottom, or maybe a transparent border:

.selector tr td { padding-bottom: 3px }