CSS border-right，border-bottom在Firefox中未显示

Question

I am working on a Tic TAc Toe AI in javascript.

DEMO

If you are using a browser other than IE, or Firefox, you will notice that there is a blue Tic Tac Toe board on the screen. But if you are using firefox, the board doesn't show and in Chrome, the board is messed up. Here is my HTML:

<table id="ticTable" cellpadding="0" cellspacing="0">
    <thead>
        <th colspan="3" id="status">&#x2d;&#x2d;&#x2d;&#x2d;</th>
    </thead>
    <tr>
        <td width="110" height="110"></td>
        <td width="110" height="110"></td>
        <td width="110" height="110"></td>
    </tr>
    <tr>
        <td width="110" height="110"></td>
        <td width="110" height="110"></td>
        <td width="110" height="110"></td>
    </tr>
    <tr>
        <td width="110" height="110"></td>
        <td width="110" height="110"></td>
        <td width="110" height="110"></td>
    </tr>
</table

And here is my CSS:

td{
    margin:0px;
    padding:0px;
    border-bottom:5px solid #58ACFA;
    border-right:5px solid #58ACFA;
    text-align:center;
}
tr:last-of-type td,
tr td:last-of-type{
    border-bottom:none;
}

This works perfectly in Safari and Chrome:

But then, nothing in Firefox.

How can I fix this board in Firefox? Thanks!

Answer 1

Or try

margin:0px auto;
padding:0px;
border-bottom:5px solid #58ACFA;
border-right:5px solid #58ACFA;
text-align:center;