实现表行高度覆盖？答案

【问题标题】：Materialize Table Row Height Override?实现表行高度覆盖？
【发布时间】：2018-01-27 06:44:33
【问题描述】：

我有一张表，我想覆盖它的行高，因为行太高了。我尝试在我自己的 css 上在 tr 上设置一个类并设置高度值。

CSS：不，这就是这个模板的所有 CSS。和html

tr.unitGridRow {
  height: 20px;
}

<tbody>
  {{#each unitInService}}
  <tr class="unitGridRow">
    <td>
      <div class="chip" style="background: {{unitColorCode}}; color: {{unitTextColorCode}};">
        {{callSign}}
      </div>
    </td>
    <td>{{currentStatus}}</td>
    <td>{{timeInStatus}}</td>
  </tr>
  {{/each}}
</tbody>

但行高永远不会改变。我目前正在使用 Meteor 1.5.0 和 Materialize 0.98.2。

非常感谢任何帮助，

【问题讨论】：

我们需要查看更多代码（HTML 可能还有 CSS）来确定您的表格行高的原因。
@JonUleis 我已经更新了问题中的代码。希望对您有所帮助。

标签： html css html-table row materialize

【解决方案1】：

这可能为时已晚，但可能对未来的谷歌员工有所帮助。

由于填充，行高是固定的。手动修改css中的填充，应该可以完成工作。至少它对我有用。

【讨论】：

【解决方案2】：

单位vh代表“视口高度”，数字代表视口高度的百分比。所以1vh 表示窗口高度的 1%。那非常小，并且表格行不希望小于其内容的高度。将此设置为50vh，看看会发生什么。不确定您要达到的目标，但vh 似乎不是行高的正确单位。如果行太高，那么它们里面一定有什么东西使它们变高了。

【讨论】：

是的，对不起，我刚刚设置了它，看看它是否会改变。我尝试了 10 px、20 px、40 px、100 px 等等，无论我将高度设置更改为什么，它都不会让步。我将在我的问题中更新 CSS 以避免混淆。我猜这是 Materialize 库中内置的东西，但我还没有克服它。我也尝试调整填充顶部和底部，仍然没有运气。
使用检查器并检查行内容的所有样式。它里面有东西在强迫它的高度。
该行似乎被锁定为 68 像素高。除了芯片（32 像素）和文本（小得多），我什么都没有。 Materialize 中的所有表格都有这种样式的行，我认为覆盖它不会那么难，但我想我可能不得不覆盖整个表格。
知道了 - td 高度也必须调整...呃！感谢所有的帮助。

【解决方案3】：

好的，在深入研究并弄乱了一点之后，我发现（行中的列）也必须被覆盖以设置高度。

【讨论】：