将切成薄片的图像重新组装到表格中时，如何避免出现间隙？

Question

差距似乎只出现在Chrome中，而没有出现在资源管理器或Firefox中。 我尝试添加边框折叠：折叠但没有变化。

仅在镀铬中存在间隙。

let table = `<table>`;
const rows = 4;
const columns = 5;
for (let r = 1; r <= rows; r++) {
  table += `<tr>`;
  for (let c = 1; c <= columns; c++) {
    table += `<td><img src="../images/imageSlices/bcpot002_r${r}_c${c}.jpg" 
    alt="bowl"/></td>`;
  }
  table += `</tr>`
}
table += `</table>`;

td {
  padding: 0px;
  margin: 0px;
  border: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  width: 100%;
  max-height: 100%;
  display: block;
}

我在这里缺少什么还是有bug（希望有个修复程序）？

Answer 1

您需要为表指定border-collapse值。

table {
  border-collapse: collapse;
  border-spacing: 0;
}

考虑使用CSS Reset样式表来确保诸如边距和填充之类的内容在浏览器之间保持一致。