消除 tbody 标签之间的间隙

Question

当两个tbody标签都像这样内联显示时，有没有办法消除它们之间的轻微间隙？

http://jsfiddle.net/kttss/

正如您在小提琴中看到的，在两张桌子之间有一个微小的间隙。我知道我可以通过使用负边距手动摆脱这个问题，但这似乎很麻烦，因为我有一个可变数量的表 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 显示。您还必须使用border-collapse:collapse 折叠边框，或者也使用@JoeEnos 的答案中的border-spacing: 0。

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

Demo

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