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.
Best Answer
Ok, please read this
css property box-sizing has no effect on the box model
A workaround could be, is to set
And than use
For a cross-browser same height
<td>