Add distance between two rows in table not working in IE7

Question

I have a table where I need the distance between two rows of the <tr>table. I did it as follows:

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;
    padding-top:0;
    padding-bottom:0;
    margin:0;
}

table.fltrTbl tr
{ 
}

But this solution does not work with IE7. Can you suggest any changes to this class to make this work in IE7?

Note. Please do not respond to the use of a separate class for each tr in the table.

Answer 1

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

Answer 2

IE7 border-spacing . ( IE 8 ). IE7 HTML cellspacing - .

- - .

Answer 3

, border: 2px solid transparent ie7 ( ie7).

2px td, , , border-left border-bottom.

Answer 4

border-collapse border-collapse: separate td. W3C, collapse border-spacing empty-cells . separate border-spacing , , .

Answer 5

:

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

Answer 6

, padding-bottom 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

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>

jsfiddle:   http://jsfiddle.net/IConway/htsqoe7j/