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

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

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. jsfiddle.net/JaF5h/36.

Working perfectly ... Thanks. Didn't want to do it with adjacent selector frankly but it looks like there's no way else to do it. – Ahmad Alfy May 3 at 22:01.

Try this: tbody { display:block; margin: -1px; }.

This one is working perfectly ... A minor issue showed is that the border of the cells close to the table is showing up too ... You can check what I mean here : jsfiddle. Net/EpLj4 – Ahmad Alfy May 3 at 21:59 1 ah, thought that was the desired effect. If you don't want that do this then: tbody { display:block; margin: -1px } – mauteri May 3 at 22:13 This was the exact effect needed : jsfiddle.Net/JaF5h/36 Thanks :) – Ahmad Alfy May 3 at 22:18 1 No problem, glad to help :-) – mauteri May 3 at 22:25 +1 Nice answer.

I have made minor formatting changes in your answer to make use of the code highlighting in SO. – Andrie May 37 at 8:33.

I left out something important. JsFiddle "normalizes" the CSS with a reset sheet. If you unselect the "normalize css" checkbox on the left side you will get black border.

There will be some extra padding to remove without the reset stylesheet though.

I've removed border-collapse but still the black doesn't show up – Ahmad Alfy May 3 at 21:52.

Try the following it worked for me: table { border-collapse:collapse; border: solid #000; } table td { border: 1px solid red; }.

This one works but the border width is set to 2px instead of 1px even when you remove the 1px – Ahmad Alfy May 3 at 21:58.

Please note that the solution of John Catterfeld is not so perfect it seems to... See jsfiddle.net/JaF5h/37/ The inner borders overlay the main outer border With his example, we couldn't see it because it was 1 red pixel on a black line. With two white pixels it becomes obvious... unfortunately no solution yet.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions