消除tbody标签之间的差距

有没有办法消除两个tbody标签之间的差距轻微当他们都显示这样内联？消除tbody标签之间的差距

what the html renders

正如你可以在小提琴看到，在两个表之间有轻微的差距。我知道我可以通过使用负边距来手动摆脱这个问题，但是由于我有一个可变数字为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>

来源

2013-07-03 user886596

这很有趣。你的照片并没有真正显示这个问题，但它在你的小提琴中很明显 –

是否有任何特定的原因需要两个内联'tbody's？为什么不把它们放入一个？ –

看起来像添加border-spacing: 0;到您的table元素将有所帮助。如果没有这个，每个边界周围都有2个像素，这意味着表格之间有4个像素。

来源

2013-07-03 21:48:54

这是您的答案[小提琴]（http://jsfiddle.net/kttss/8/）。我相信你仍然应该删除/注释掉tbody之间的空白或浮动元素，因为即使你的小提琴在Chrome中运行得很好，Firefox也会在这些tbody之间形成一个空格。无论如何为好的加法+1。 –

使用float而不是inline-block显示。您还必须使用border-collapse:collapse折叠边界，或者使用border-spacing: 0，正如@ JoeEnos的回答一样。

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

Demo

随着display: inline-block，在标记的空白（换行符，制表符）被折叠和呈现为单个空格。 float不受此影响。

来源

2013-07-03 21:45:31

尽管没有必要折叠边框，但它确实给了它更统一的外观 –

@CodyGuldner是的，没有折叠，表格和“tbody”之间有一个奇怪的填充。 '=]'好吧，'border-spacing：0'也解决了这个问题，就像@ Joe的回答一样。 –

消除tbody标签之间的差距

回答

相关问题