调整浏览器大小时带有背景图像的 Html 表格错误

Question

table {
  border-collapse: collapse;
}

table td {
  background-image: url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');
}

#main {
  width: 200px;
  margin: auto;
  border: 1px solid red;
}

<div id="main">
  <table>
     <tr>
       <td>d</td>
       <td>a</td>
       <td>m</td>
       <td>n</td>
       <td>b</td>
       <td>u</td>
       <td>g</td>
    </tr>
  </table>
</div>

我有一个简单的表格，其中 TD 的背景图像位于一个居中的 div 中。当我用鼠标（Chrome、Opera）调整浏览器窗口宽度时，TD 之间会出现一个空格。

我该如何解决？

示例：http://jsfiddle.net/gauh9s7t/

视频：https://www.youtube.com/watch?v=V4h5bEOS3jE

Answer 1

不是错误，它与您的背景图像有关：

url('https://images.pexels.com/photos/751373/pexels-photo-751373.jpeg');

如果您将此属性替换为背景色，则表格中的每个 td 都可以。