Using CSS to make table's outer border color different from cells' border color

I want to use CSS to set a color of the outer border of the table ... Then the inner cells would have different border color ...

I created something like this :

table {
     border-collapse:collapse;
     border: 1px solid black; 
}

table td {
     border: 1px solid red;
}

Problem is, the table's color change and become red as you can see here : http://jsfiddle.net/JaF5h/

If the border width of the table is increased to be 2px it will work : http://jsfiddle.net/rYCrp/

I've been dealing with CSS and cross browsers issues for so long ... This is the first time I face something like that and I am totally stuck ... No idea what to do!

Any one knows how to get that fixed with border-width:1px ?