gpt4 book ai didi

html - 如何在 Firefox 中为表格单元格设置固定高度?

转载 作者:太空宇宙 更新时间:2023-11-04 15:35:48 25 4
gpt4 key购买 nike

如何在 Firefox 中为表格单元格设置固定高度?以下适用于 IE 和 Chrome,但 Firefox 未使用指定的高度:

<!DOCTYPE html>
<html>
<head>
<title>Table Cell Height Test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

.overlay {
border-collapse: collapse;
table-layout: fixed;
position: fixed;
top: 0px;
left: 0px;
}

.overlay th {
padding: 4px;
border: 1px solid black;
background-color: white;
}

.test {
border-collapse: collapse;
table-layout: fixed;
}

.test th {
padding: 4px;
border: 1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<table class="overlay">
<thead>
<tr>
<th style="height: 42px;">Staff</th>
</tr>
</thead>
</table>
<table class="test">
<thead>
<tr>
<th style="height: 42px;">Staff</th>
<th style="height: 42px;">Monday<br>
27th</th>
</tr>
</thead>
</table>
</body>
</html>

目标是覆盖与测试表相同的高度。

我找到的一个解决方案是将单元格内容包装在一个 div 中,并在 div 上设置高度。

我发现的另一个解决方案是使用 jQuery,

$('table.overlay tr').height($('table.test tr').outerHeight());

还有其他解决办法吗?

最佳答案

height of a cell取决于其内容的高度要求,任何 height 值设置都将被视为强加最小 高度。当内容为文本时,高度要求取决于文本的行数和行高,这可能因浏览器而异。因此,如果您真的想要在某个固定(以像素为单位)区域内呈现一致的渲染,则需要以像素为单位设置字体大小和行高(这当然意味着它自己的问题)。

关于html - 如何在 Firefox 中为表格单元格设置固定高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9030728/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com