如何去除以inline-block显示的表格行之间的空格？

Question

我正在学习响应式表格的示例：http://dbushell.com/demos/tables/rt_05-01-12.html，但是我在使用inline-block显示表格行时出现了奇怪的间隔。 这是一个演示：http://codepen.io/anon/pen/Fksjw。 我尝试将外边距归零，但无法去除这个空白。

- Pierre

---

你能创建一个JSFiddle吗？你的CodePen对我来说是空的。 - Nelson

@Nelson，这是链接：http://jsfiddle.net/W2ACD/ - Pierre

我看到列之间有空格，而行之间没有，前者是你想要避免的吗？ - Nelson

@Nelson，这些列是tr标签，是的，我想要避免这种情况。 - Pierre

Answer 1

您看到的是内联（inline或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之间的所有换行符和空格。

- dfsq

---

谢谢，两种解决方案都很好用。但是为什么换行符会导致这个问题呢？ - Pierre

@Peter 这里有描述[http://www.w3.org/TR/CSS2/text.html#white-space-model]。 - dfsq

Answer 2

将以下内容添加到您的CSS中：

table {
  border-collapse: collapse;
}

tbody tr {
   display: table-row;
}

tbody td {
   display: table-cell;
}

- Morpheus

---

这不是我要找的，我需要将表格行显示为inline-block，将td显示为block，以使表格在小屏幕上显示时不会破坏布局。 - Pierre

Answer 3

行内块级元素始终会增加3像素的额外边距。您可以通过为每个水平方向减去3像素来解决此问题：

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

- arenas.v86