Home/ Questions/Q 7169933
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T15:06:36+00:00

How can I have fixed height for table cells in Firefox? The following works

  • 0

How can I have fixed height for table cells in Firefox? The following works in IE and Chrome, but Firefox is not using the specified height:

<!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>

The aim is to have overlay the same height as the test table.

One solution I have found is to wrap the cell contents in a div and set the height on the div.

Another solution I have found is using jQuery,

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

Are there any other solutions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The height of a cell depends on the height requirements of its contents, and any height value set will be taken as imposing a minimum height. When the content is text, the height requirements depend on the number of lines of text and on the line height, which may vary by browser. So if you really want consistent rendering within some fixed (in pixels) area, you would need to set font size and line height in pixels (which implies problems of its own of course).

    • 0