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

Question

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 ?

Answer 1

I would acheive this by using adjacent selectors, like so:

table {
    border: 1px solid #000;
}

tr {
    border-top: 1px solid #000;
}

tr + tr {
    border-top: 1px solid red;
}

td {
    border-left: 1px solid #000;
}

td + td {
    border-left: 1px solid red;
}

It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.

This won't of course work in IE6 as it doesn't understand the adjacent selectors.

http://jsfiddle.net/JaF5h/36/