4

我正在尝试在 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/

我看到了这篇文章，但没有任何效果 如何删除表格中行和列之间不需要的空间？

4

2 回答 2

5

从 中删除display:inline-block;规则#gameGrid .gridRow .box。

jsFiddle 示例

于 2013-05-08T14:01:14.597 回答
2

您将 td 显示为内联块。删除它。

于 2013-05-08T14:01:22.750 回答