html - 使表格数据 Angular 点接触

我在试着做一个棋盘，但对方格的外观有点问题。棋盘格的颜色方案是正确的，但由于某些原因，每个方块的角似乎没有接触。
下面是我拥有的两行代码片段，其中每个数据条目都属于一个类“light”或“dark”：

<tr><td id="1"><span class="dark"></span></td><td id="2"><span class="light"></span></td><td id="3"><span class="dark"></span></td><td id="4"><span class="light"></span></td><td id="5"><span class="dark"></span></td><td id="6"><span class="light"></span></td><td id="7"><span class="dark"></span></td><td id="8"><span class="light"></span></td></tr>

<tr><td id="9"><span class="light"></span></td><td id="10"><span class="dark"></span></td><td id="11"><span class="light"></span></td><td id="12"><span class="dark"></span></td><td id="13"><span class="light"></span></td><td id="14"><span class="dark"></span></td><td id="15"><span class="light"></span></td><td id="16"><span class="dark"></span></td></tr>

我的CSS代码如下：

td {
    height:60px;
    width:60px;
}
table{
    border:2px solid black;
    border-collapse: collapse;
}
span{
    width: 100%;
    height: 100%;
    display: inline-block;
}
.light{
    background-color: #F0F8FF;
}
.dark{
    background-color: #8B4513;
}

生成一个如下所示的表：

我想知道是否有什么方法可以清理桌子的外观，主要是让每种颜色的角落互相接触。

最佳答案

请将cellspacing=“0”和cellpadding=“0”添加到table元素中，以便删除两者之间的多余空间。

关于html - 使表格数据 Angular 点接触，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34824431/