CODEWITHSUNDEEP
htmlfirefox
grom
grom

Reputation: 16126

How can I have a fixed height for table cells in Firefox?

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?

Upvotes: 2

Views: 417

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201748

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).

Upvotes: 4

Related Questions