表格行的确切高度

Question

我正努力在html表格行上设置 EXACT 高度。

左列是两个高度为44px的div，右列是表。每行的高度设置为44px，但在Google Chrome网络检查工具上，行的高度显示为44.44像素。

SASS：

table {
  width: 100%;
  border: none;
  tr {
    height: 44px;
    cursor: pointer;
    td {
      padding: 0 16px;
      border-bottom: 1px solid $bg-light;
      vertical-align: middle;
    }
  }
}

我也使用Eric Meyers css-reset，但问题仍然存在或不存在。

关于额外.44px来自哪里的任何线索？

修改

问题似乎是Google Chrome特有的。 Safari呈现正确的高度。

Answer 1

Eliminate gap between tbody tags

可能重复

但是，这是您的div旁边的表格的边框折叠，边框间距问题。默认情况下，表格中存在令人讨厌的额外空间。如果要对齐中心的项目，还要确保您的td和div显示为内联块/块或flex。

这里有一些代码和一个如何解决它的链接。

table {
   border-spacing: 0;
   border-collapse: collapse;
}

https://codepen.io/calebswank11/pen/rJvBWK