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

Posted 2023-03-06

【中文标题】设置表格的 td 高度在 Firefox 中不起作用

【英文标题】：Setting a table's td height not working in Firefox

【发布时间】：2018-11-25 13:45:40

【问题描述】：

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

铬：

火狐：

如果你想自己试试：

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 中的功能，但我理解表格大小的方式是表格元素不能具有固定大小。相反，它们的width 和height 属性被用作min-width / min-height，它们根据它们的内容增长。是否有快速解决方法或者我应该在 flexbox 布局中重建表格？

更新

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

【参考方案1】：

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

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

到我的 css，现在它似乎在 Firefox 和 chrome 中正确显示。不是很干净，但它的工作原理。

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