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/

As you can see in the fiddle, in between the two tables there is a slight gap. I know I can get rid of this manually by using negative margin, but this seems like a hassle since I have a table with a variable number of tbodys.

<table style="margin:0;" border="1">
   <tbody  style="display: inline-block;  margin:0;">
      <tr>
         <td>
            1
         </td>
         <td>
            2
         </td>
      </tr>
      <tr>
         <td>
            3
         </td>
         <td>
            4
         </td>
      </tr>
   </tbody>
   <tbody  style="display: inline-block; margin: 0;">
      <tr>
         <td>
            1
         </td>
         <td>
            2
         </td>
      </tr>
      <tr>
         <td>
            3
         </td>
         <td>
            4
         </td>
      </tr>
   </tbody>
</table>

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.