html - 使表数据 Angular 接触

Question

我正在尝试制作棋盘，但正方形的外观有点问题。棋盘配色方案工作正常，但由于某种原因，每个方 block 的 Angular 似乎没有接触。

这是我的 2 行代码片段，其中每个数据条目属于“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;
}

生成的表格如下所示:

我想知道有没有什么办法可以让表格看起来更干净一些，主要是让每个颜色的 Angular 相互接触。

Answer 1

请将 cellspacing="0"和 cellpadding="0"添加到表格元素中，以便您删除中间的多余空间。