Add spacing between two rows in a table not working in IE7

I've a table on where I need a spacing between two rows <tr> of table. I did it in following way:

table.fltrTbl
{
    margin:0px;
    padding:0px;
    border-collapse:separate;
    border-spacing:0 11px;  
}

table.fltrTbl td
{ 
    vertical-align:middle;
    padding-right:14px; 
    padding-left:0;
    pa开发者_开发知识库dding-top:0;
    padding-bottom:0;
    margin:0;
}

table.fltrTbl tr
{ 
}

But, this solution is not working with IE7. Can you suggest any changes to this class in order to make that work in IE7?

Note: Please do not answer apply separate class to every tr in table.

Try removing the border-spacing, change border-collapse to collapse and just use the td padding to create the spacing.

IE7 doesn't support border-spacing at all. (And IE 8 only with one value). For IE7 you can use the HTML attribute cellspacing instead - but also only with one value for both horizontal and vertical spacing.

The only cross browser way to have a horizontal gap in table is to use a blank table row and cell.

I achieved the desired effect using border: 2px solid transparent only for ie7 (you can use the condicional comments to apply this style only to ie7).

In the example given I added a 2px transparent border all around the td, but it might be the values you want, and it works for specific borders such as border-left or border-bottom.

For me changing the border-collapse property to border-collapse: separate on the td element is what worked. According to the W3C, when using collapse border-spacing and empty-cells properties will be ignored. When using separate border-spacing properties are honored, and that is what we want.

I found a fix via expression:

*border-collapse: expression('separate', cellSpacing = '5px');

To add spacing to my menu items I used a padding-bottom attribute in my css.

<style>
div.c4 {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 12px;
           font-weight: bold;
           text-align: left;
           color: #800000;
           padding-bottom: .5em;
        }
</style

The HTML:

<table width="15%" style="margin: auto;" >
<tr>
<th scope="col">
<div class="c4">Home</div>
<div class="c4">About Me</div>
<div class="c4">Photographs</div>
<div class="c4">Locations</div>
<div class="c4">Testimonials</div>
</th>
</tr>
</table>

here is my jsfiddle example: http://jsfiddle.net/IConway/htsqoe7j/