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

我遵循响应表的示例：

但我在显示为内联块的表行之间有一个奇怪的空格，下面是一个演示：

我尝试过将边距归零，但无法消除此空间。

将此添加到css中：

table {
  border-collapse: collapse;
}

tbody tr {
   display: table-row;
}

tbody td {
   display: table-cell;
}

---

您看到的是内联（内联块）元素的默认行为。一种可能的解决方案是将

字体大小

和

行高

设置为0，以使空白不可见。然后您只需将它们重置回某些值：

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

---

另一种解决方案是手动删除

tr

之间的所有换行符和空格。内联块元素始终提供3个像素的额外边距。您可以通过为每个水平面减去3个像素来解决此问题：

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

---

你能做一个三明治吗？您的代码笔对我来说似乎是空的。@Nelson在这里：我看到的是列之间的空格，而不是行之间的空格，前者是您想要避免的吗？@Nelson列是tr标记，是的，这是我想要避免的。这不是我要找的，我需要表行显示为内联块，td显示为块，使表格在小屏幕上显示而不破坏布局。谢谢，两种解决方案都很好，但为什么换行会导致这种情况？@Peter this描述。