如何删除显示为内联块的表行之间的空格？

Question

我正在关注响应表的示例： http://dbushell.com/demos/tables/rt_05-01-12.html

但我在显示为内联块的表行之间有一个奇怪的空间，这是一个演示：http://codepen.io/anon/pen/Fksjw

我尝试将边距归零，但我无法摆脱这个空间。

Answer 1

您看到的是内联（内联块）元素的默认行为。一种可能的解决方案是将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

Inline-block元素总是给出3个像素的额外余量。你可以解决它为每个水平边减去3个像素：

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