设置 table 的 td 高度在 Firefox 中不起作用

Question

我有一个 table，单元格的内容完全填满了它们。我给内容一个固定的宽度和一个 height 的 100% 以便元素变大仍然能够增长单元格。单元格还通过简单的 height 属性具有最小高度，因此内容的 100% 高度会产生影响。在 Chrome 和 Edge 中，一切正常，但在 Firefox 中，单元格不会增长：

Chrome:

火狐：

如果你想自己尝试：

table {
  border-spacing: 8px;
  font-size: 14px;
}

td {
  height: 50px;
}

td div {
  height: 100%;
  width: 200px;
  background-color: green;
}

<table>
  <tr>
    <td>
      <div>
        This div is normal sized.
      </div>
    </td>
    <td>
      <div>
        This div is normal sized.
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div>
        This div is also normal sized but should size accordingly.
      </div>
    </td>
    <td>
      <div>
        This div is very very big so it gets higher and should affect other divs in the same row. But not in Firefox apparently.
      </div>
    </td>
  </tr>
</table>

不确定这是 Firefox 中的错误还是 Chrome 中的功能，但我理解 table 大小调整的方式是 table 元素不能具有固定大小。相反，它们的 width 和 height 属性被用作 min-width / min-height 并且它们根据它们的内容增长。有没有快速解决方法，或者我应该在 flexbox 布局中重建 table？

更新

顺便说一句，当我在行 / tr 和 td 上设置固定的 height 和 height: 100%; 时，它在 Firefox 中有效。但后来 Chrome...

就坏了

Answer 1

我设法找到了解决方法。我添加了行

@-moz-document url-prefix() {
    tr {
        height: 50px; // Your min height
    }
    td {
        height: auto;
    }
}

我的 css 现在它似乎在 firefox 和 chrome 中正确显示。不是很干净，但是可以用。

显然 Chrome 是在版本 50 中采用 Firefox 的表格行为，但由于它破坏了太多布局而恢复了。将 height: 100%; 应用于 tds 的技巧起作用了，因为所有百分比大小都会自动转换为 auto。这样就更有意义了。

设置 table 的 td 高度在 Firefox 中不起作用

Setting a table's td height not working in Firefox

html

css

firefox

html-table

css-tables

更新