Question

I made a test about a border to separate thead and tbody, but the thead seems to have a priority on the tbody.

If you have an idea…

• Here is my test: http://jsfiddle.net/cFKns/2/
• Search to do this: http://img844.imageshack.us/img844/693/12293655.png

Answer 1

You need to set the border-collapse value to separate on the portions you don’t want the border overlapping, then set the border-spacing to 1px on the side the borders will touch.

I also had to move the border definitions to the TH and TD tags, as I don’t think border-collapse and border-spacing apply to thead and tbody (at least it didn’t work when I tried).

You can see the updated results with my findings here: http://jsfiddle.net/jasongennaro/Pf7My/1/

I targeted the first set of td tags by using tr:first-child td. The makes sure only the top row as a black top border.