If you want to avoid border overlapping, ensure that the border-collapse
property is set to separate
on the specific areas where you don't want borders to overlap. Additionally, set the value of border-spacing
to 1px on the sides where the borders will meet.
I found that moving the border definitions to the TH
and TD
tags was necessary, as it seems that border-collapse
and border-spacing
do not affect thead
and tbody
elements (at least in my tests).
You can view the updated outcome based on my discoveries at this link: http://jsfiddle.net/jasongennaro/Pf7My/1/
To apply a black top border only to the first set of td
elements, I used the selector tr:first-child td
. This ensures that only the top row has the specified border style.