Create a grid without spaces using the html table

Question

I am trying to create a grid in html, but I want to remove the spaces between my cels and I cannot find.

<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> 

and 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; } 

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

I saw this post, but nothing works. How to remove unwanted space between rows and columns in a table?

thanks

Answer 1

Change the display:inline-block; rule display:inline-block; with #gameGrid .gridRow .box .

JsFiddle example

Answer 2

you show your td as an inline block. delete it.