How to remove extra border spacing between TBODY elements?

Question

IMPORTANT: This question is no longer valid. This bug was fixed in recent versions of Chrome.

I use border-spacing: 1px CSS rule to get all the cells in my TABLE to have a 1px spacing between them. However, I have to use multiple TBODY elements in my table. I get 2px between THEAD, TBODY and TFOOT elements (Chrome).

What's the easiest way to replace these 2px gaps with 1px?

Exact HTML and CSS code: http://jsfiddle.net/qQA3Z/

Answer 1

Note: This is a Webkit-specific bug. (Not present in Firefox, and as usual IE won't even load jsFiddle to test it.)

Unfortunately, there is no way to properly fix this. There is an open question on this very topic already. Additionally, there is an open bug report since Chrome 8 which has been confirmed to exist through Chrome 20 (and I can confirm in Chrome 25). There is also an open Webkit bug thread on this matter, which is still "NEW".

To be honest, I can't even find a workaround for this. Playing with border-spacing, margin, and even position don't seem to have an effect on this.