Using cellspacing and border-collapse:collapse cuts cell borders.

Question

Hi I just added cellspacing to get space between the cell, but this has cut out the border of the cell an the left hand side.

This is happening because of the use of border-collapse:collapse for all tables, but I read on the net that this is to standardize for cross browser.

If this is true.

Should I keep border-collapse:collapse for all tables? if so what fix there is for this.

Sorry.

I am using IE7, but it has to be cross browser.

CSS example

/*Universal selector:
This rule set will be applied to every element in a document:*/
*
{
margin:auto;
padding:auto;
/*text-align:center;*/
}

/*The folowing rule will help to minimaze the differences between browesers*/
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
img {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse ;border-spacing:0;font-size:1em; font-weight:normal; font-style:normal; font-family:Times New Roman;}


.divTitle{
    margin:10px;
}
}
.title
 {
font-weight:bold;
color:#0076BF;
font-size:1.4em;
font-family:Times New Roman;    
}

.divContainer
{   
margin:10px;

background-color:#C7D8EE;
border:2px solid #0076BF;
text-align:left;    
}

.tableContainer1
{
color:#0076BF;
margin:10px;
border-spacing: 15px;
empty-cells:show;

}   

.tableContainer1 tbody tr td
{
background-color:white;
border:2px solid #0076BF;
border-collapse:separate;

}

Thanks.

Answer 1

border-collapse is to remove all spacing between cells. If you want cellspacing, you could use the border-spacing css property. It doesn't work in IE7 and below, but all other browsers will ignore the cellspacing attribute if border-spacing is present, so you can use both to get it working in all browsers.

Do not use border-collapse:collapse; if you want to have space...