消除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標籤之間的差距

回答

相關問題