Bogdan Bogdan - 1 month ago 11
HTML Question

Table cell fixed height and border issue in Firefox

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

<td>
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 http://jsbin.com/oseqiz/9/. (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
<div>
inside the
<td>
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

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.