html - tbody タグ間のギャップをなくす

Question

このように両方がインラインで表示されている場合、2 つのタグ間のわずかなギャップをなくす方法はありますか?tbody

http://jsfiddle.net/kttss/

フィドルでわかるように、2 つのテーブルの間にはわずかな隙間があります。負のマージンを使用して手動でこれを取り除くことができることはわかっていますが、可変数の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

要素に追加border-spacing: 0;すると役立つようです。tableこれがないと、各境界線が 2 ピクセルで囲まれます。つまり、テーブル間に 4 ピクセルがあります。

Answer 2

表示の代わりにフロートを使用しinline-blockます。また、境界線をで折りたたむか、@JoeEnos の回答のようにborder-collapse:collapse使用する必要もあります。border-spacing: 0

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

デモ

を使用display: inline-blockすると、マークアップ内の空白 (改行、タブ) が折りたたまれ、単一のスペースとしてレンダリングされます。floats はこれによる影響を受けません。