Eliminare il divario tra le etichette tbody

Question

C'è un modo per eliminare lo lieve divario tra due tag tbody quando sono entrambi visualizzati in linea come questo?

http://jsfiddle.net/kttss/

Come si può vedere nel violino, tra le due tabelle c'è un piccolo spazio. So che posso liberarmi di questo manualmente usando il margine negativo, ma questo mi sembra una seccatura dato che ho una tabella con un numero variabile di tbody s.

<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

Sembra aggiungere border-spacing: 0; agli elementi table aiuterà. Senza questo, ci sono 2 pixel che circondano ciascuno dei bordi, il che significa che ci sono 4 pixel tra i tavoli.

Answer 2

Uso pescante, invece inline-block visualizzazione. Devi anche comprimere i bordi con border-collapse:collapse oppure utilizzare border-spacing: 0 come nella risposta di @ JoeEnos.

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

Demo

Con display: inline-block, lo spazio bianco nella marcatura (interruzioni di linea, tabulazioni) vengono compressi e reso come un singolo spazio. float s non sono interessati da questo.