使表格数据角落接触

Question

我试图制作一个国际象棋棋盘，并且对方块有轻微的问题。出场。棋盘配色方案工作正常但由于某种原因，每个方块的角落似乎都没有碰到。

这里是我有2行代码的片段，其中每个数据条目都属于一个类＆＃34; light＆＃34;或者＆＃34;黑暗＆＃34;：

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

生成一个如下所示的表：

我想知道是否有办法清理桌子的外观，主要是为了让每种颜色的角落互相接触。

Answer 1

请添加cellspacing =＆＃34; 0＆＃34;和cellpadding =＆＃34; 0＆＃34;对于table元素，你可以删除它们之间的额外空间。

Answer 2

尝试使cellspacing和cellpadding等于0.同时使边框折叠

Answer 3

试试这个fiddle

技巧就是这个CSS

td {
  height:60px;
  width:60px;
  padding:0px;
  display:inline-block;
  overflow:hidden;
 }