Eliminate gap between tbody tags

Question

Is there a way to eliminate the slight gap between two tbody tags when they are both displayed inline like this?

http://jsfiddle.net/kttss/

Answer 1

Looks like adding border-spacing: 0; to your table elements will help. Without this, there's 2 pixels surrounding each of the borders, which means there's 4 pixels between the tables.

Answer 2

Use float instead of inline-block display. You also have to collapse the borders with border-collapse:collapse, or use border-spacing: 0 as in @JoeEnos's answer, as well.

table { border-collapse:collapse; }
tbody { float:left; }

Demo

With display: inline-block, the white-space in the markup (line-breaks, tabs) are collapsed and rendered as a single space. floats are not affected by this.