Bogdan Bogdan - 1 year ago 116
HTML Question

Table cell fixed height and border issue in Firefox

I have a table displaying some data and I need the table cell

to have a fixed height and a bottom border. The problem is that Firefox is rendering the cell height differently than Chrome or IE8. For example I have the following css rules:

table {
width: 100%;
border-collapse: collapse;

table td {
height: 35px;
border-bottom: 1px solid #000;

Firefox renders the border inside the cell defined height so it shows
34px height + 1px border
. Chrome and IE however render the full height and display the border outside/below that so it shows
35px height + 1px border

Here's a preview of the issue (open it in both Firefox and Chrome/IE to see the difference).

Is this a known bug in Firefox or are the 2 other browsers doing things incorrectly. If so, is there any fix for it?

I'd like to point out that I don't like having the extra
inside the
like I did for the second table in the above jsbin example. I implemented it like that so the rendering issue can be seen easily.

Answer Source

This issue seems to have been fixed with the latest version of Firefox (which at this time is version 40), and the height and border is now rendered consistently within all the mentioned browsers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download