消除tbody标签之间的差距

Question

当这两个tbody标记同时以内联方式显示时，有没有办法消除轻微的标记？

http://jsfiddle.net/kttss/

正如你可以在小提琴中看到的那样，在两张桌子之间有一个小小的差距。我知道我可以通过使用负边距手动摆脱这个，但这似乎很麻烦，因为我有一个变量为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

向border-spacing: 0;元素添加table似乎会有所帮助。如果没有这个，每个边框周围都有2个像素，这意味着表之间有4个像素。

Answer 2

使用float而不是inline-block显示。您还必须使用border-collapse:collapse折叠边框，或使用@ JoeEnos的答案中的border-spacing: 0。

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

Demo

使用display: inline-block，标记中的空格（换行符，制表符）将折叠并呈现为单个空格。 float不受此影响。