Question

如何在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());

还有其他解决方案吗？

Answer 1

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

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

1 个答案: