表格单元格之间的小间隙

Question

我有一张桌子，我希望边框可以折叠，所有细胞都可以触摸。我觉得我可能会遗漏一些明显的东西，但尽管已经分配了高度，但是底部边框根本没有显示出来。相反，它们只是将细胞彼此分开，允许透过背景颜色（示例中为红色）。

如果我将border-collapse更改为separate边框重新出现，但差距仍然存在，同时也会在列之间添加间隙。

JSfiddle

Answer 1

您没有定位表格行，请参阅小提琴：https://jsfiddle.net/32o87x7L/3/

.defaultTable tr{border-bottom: 2px solid blue;}
.defaultTable th,
.defaultTable td {
  position: relative;
  display: table-cell;
  vertical-align: top;
  padding: 9px 16px;
  font-size: 14px;
  line-height: 20px;
  background: #eee;
  border: none;
  //border-bottom: 2px solid blue;
  box-sizing: border-box;
}

Answer 2

通常情况下，我在提交问题后立即解决了自己的问题。 ： - /

显然，桌面细胞不能很好地定位，因为它们不能始终如一。从position: relative;删除.defaultTable th, .defaultTable td就可以了。