html - テーブルhtmlを使用してスペースのないグリッドを作成します

Question

HTML でグリッドを構築しようとしていますが、セル間のスペースを削除したいのですが、見つかりません。

<table id="gameGrid" cellspacing="0" >
    <tr class="gridRow" >
        <td class="box" ></td>
        <td class="box" ></td>
        <td class="box" ></td>
    </tr>
    <tr class="gridRow" >
        <td class="box" ></td>
        <td class="box" ></td>
        <td class="box" ></td>
    </tr>
    <tr class="gridRow" >
        <td class="box" ></td>
        <td class="box" ></td>
        <td class="box" ></td>
    </tr>
</table>

そしてCSS：

#gameGrid{
border:1px solid black;
border-collapse: collapse;
padding:0;
margin:0;
border-spacing: 0;
} 
#gameGrid .gridRow{
margin:0;
padding:0;
}
#gameGrid .gridRow .box{
margin:0;
padding:0;
background-color:green;
height:16px;
width:16px;
display:inline-block;
}

例: http://jsfiddle.net/sLG2D/1/

この投稿を見ましたが、何も機能 しませんテーブルの行と列の間の不要なスペースを削除するには?