TD border problem Firefox

such problem with firefox.

<td height="10" style="border:1px solid #990000;">&nbsp;</td>

gives red line border, but I need height 10, with   it doens't stand height 10, without it firefox doesn't show the red line. anyone one a wa开发者_运维百科y?

Make sure your table does not have the CSS empty-cells:hide; applied to it. You can apply the direct opposite value inline (opposite is show), but this is the default value so unless you're setting it to hide in some page-level CSS, this should not even be necessary.

Another CSS item that can affect empty table cells is border-collapse. Ensure that you are not setting it to collapse. The default is separate, again you can either ensure that no page-level CSS changes this style, or you can explicitly add it to the table inline.

<table style="empty-cells:show; border-collapse:separate;">
    <tbody>
        <tr>
            <td style="height:10px; border:1px solid #990000;"></td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/yHrhu/

In fact, using the non-breaking space ( ) may cause the cell to be larger than the specified 10px, since the space will be of the same font size as any text in the element. If you are using any font size that is larger than 10px, the cell would be bigger than intended.

additional to Chris's answer.

Make sure your TD's does not have position:relative applied.

Just stumble around this problem myself today turnout set the background into none or transparent make the border visible again.

table.table tr{
    background: transparent;
}