Why are table cells displayed differently in different browsers?

Here is a screenshot showing the problem:

enter image description here

Here is the CSS I am using:

#board table {
    background: #eef0ff;
    border-spacing: 0px;
    border: 1px solid #475476;
}

#board td {
    height: 20px;
    width: 20px;
    border: 1px solid #cfd7ee;
}

How can I makes the cells the same size in diferent browsers? Does anyone know why Opera and Firefox tighten the cells?

Solution

You will need to use a CSS reset, or set some of your own defaults for table margins, padding and other elements in your design.

A CSS reset (either yours or a third party one) will ensure all browsers have a similar starting point, regarding styles, as the different browsers do not have the same style defaults on different elements.

Additionally, as @thirtydot says in his answer, some browsers will ignore the height of a completely empty table cell, such as <td></td>. To ensure it is not ignored, you should add some content to these cells, a good choice being the non break space -  , in this manner: <td> </td>.