html - 消除 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，或者使用border-spacing: 0@JoeEnos 的答案。

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

演示

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