如何刪除顯示爲行內塊的表格行之間的空格？

Question

我以下響應表的這個例子： http://dbushell.com/demos/tables/rt_05-01-12.html

，但我有顯示爲inline-block的錶行之間的一個奇怪的空間，這裏有一個演示：http://codepen.io/anon/pen/Fksjw

我試圖歸零的利潤，但我可以擺脫這個空間。

Answer 1

你看到的是內聯（inline-block的）元素的默認行爲。一種可能的解決方案是將font-size和line-height設置爲0以使空白不可見。然後你只需重置他們帶回一些值：

tbody { 
    ... 
    line-height: 0; 
    font-size: 0; 
} 
tbody td { 
    ... 
    line-height: 20px; 
    font-size: 14px; 
} 

http://jsfiddle.net/W2ACD/1/

另一個解決方案是手動刪除tr之間所有的換行和空格。

Answer 2

添加到您的CSS：

table { 
    border-collapse: collapse; 
} 

tbody tr { 
    display: table-row; 
} 

tbody td { 
    display: table-cell; 
} 

Answer 3

行內塊元素總是給出3個像素的額外餘量。你可以解決它每個水平面減去3像素：

tbody tr { 
    display: inline-block; 
    margin: 0 -3px; 
    vertical-align: middle; 
}