html - 设置表格的 td 高度在 Firefox 中不起作用
问题描述
我有一个表格,其中的单元格内容完全填满了它们。我给内容一个固定的宽度和一个height
,100%
这样变大的元素仍然能够生长细胞。单元格还通过 simple 属性具有最小高度,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 布局中重建表格?
更新
顺便说一句,当我height
在行 /tr
和height: 100%;
td 上设置一个固定值时,它在 Firefox 中有效。但后来它在 Chrome 中被破坏了......
解决方案
我设法找到了解决方法。我添加了线条
@-moz-document url-prefix() {
tr {
height: 50px; // Your min height
}
td {
height: auto;
}
}
到我的css,现在它似乎在firefox和chrome中正确显示。不是很干净,但它的工作原理。
显然,Chrome 在版本 50 中将采用 Firefox 对表格的行为,但由于破坏了太多布局而被恢复。应用于 tds 的技巧height: 100%;
奏效了,因为所有百分比大小都会自动转换为auto
. 那就更有意义了。
推荐阅读
- c++ - 表达式在c ++中必须是一个常量值
- python - 二维列表带来错误的结果
- vue.js - 使用 axios 将文件发布到谷歌存储桶
- c - 是否可以使用 GIMP 插件创建可停靠对话框?
- python - 将 for 循环转换为递归
- linear-programming - 如何在 SCIP 优化套件中为不同的约束处理程序设置不同的全局参数?
- algorithm - 如何在飞镖中更改月份?
- html - 为什么 CSS clamp() 不能只使用零(没有单位)?
- c# - 我可以添加到 Grid 的功能,以便我可以指定 new Grid().BindIsVisible( xx );
- java - 阅读文本并添加到列表