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

Question

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

Solution 1

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

Solution 2

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.

Solution 3

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.

Solution 4

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.

Solution 5

I found a fix via expression:

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

View more solutions