tbodyタグ間の隙間を取り除く

Question

のタグが2つのtbodyタグの間に隙間があるように、これらのタグが両方ともインラインで表示されている場合、その隙間をなくす方法はありますか？

http://jsfiddle.net/kttss/

わずかな隙間がある2つのテーブル間であなたは、フィドルに見ることができるように。私は負のマージンを使ってこれを手動で取り除くことができることを知っていますが、tbodyの可変数のテーブルがあるので、これは面倒です。

<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

あなたのtable要素にborder-spacing: 0;を追加するように見えます。これがなければ、各境界を囲む2つのピクセルがあります。つまり、テーブル間に4ピクセルあります。

Answer 2

inline-blockの代わりにfloatを使用してください。また、境界線をborder-collapse:collapseで崩壊させるか、@ JoeEnosの答えのようにborder-spacing: 0を使用する必要があります。 display: inline-blockと

Demo

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

、マークアップに空白（改行は、タブ）は崩壊し、単一のスペースとしてレンダリングされています。 floatはこの影響を受けません。