为什么我的HTML表从左到右缩小图像？

Question

我制作了一个简单的HTML表格，用占位符图像填充它，并用背景颜色隔开它们。这就是我得到的：

将最右边的图像与左边相比较......然后注意每个图像如何变小。很奇怪。

＆＃13;

＆＃13;

td {
  padding: 5px;
  background-color: #C6C6C6;
}

＆＃13;

<table>
  <tr>
    <td>
      <img src="http://www.examplesite.com/pholder.png" />
    </td>
    <td style="background-color: #FFFFFF;"></td>
    <td>
      <img src="http://www.examplesite.com/pholder.png" />
    </td>
    <td style="background-color: #FFFFFF;"></td>
    <td>
      <img src="http://www.examplesite.com/pholder.png" />
    </td>
    <td style="background-color: #FFFFFF;"></td>
    <td>
      <img src="http://www.examplesite.com/pholder.png" />
    </td>
    <td style="background-color: #FFFFFF;"></td>
    <td>
      <img src="http://www.examplesite.com/pholder.png" />
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，我使用边距和空列来分隔表格。我认为这可能是原因，但我不确定为什么或如何修复它同时保持整洁的视觉外观。我该如何解决这个问题？

注意：该网站也具有移动响应能力，并且必须自动缩放图像，因此设置固定的宽度/高度对我来说无效。

Answer 1

我对你的确切问题没有一个好的答案，但我可以告诉你使用表格进行布局是一个非常糟糕的做法，特别是如果你想让网站响应。表格用于表格数据显示。

将div和css与媒体查询一起使用可确保您的布局一致。当然它会花费更多，但有很多关于如何做的好材料。

====编辑====

要解决手头的问题，您可以为td添加宽度。如果您知道将显示多少元素，它将保持相同的大小。在当前表格中，你有5个

<tr>
    <td width="20%">image</td>
    <td width="20%">image</td>
    <td width="20%">image</td>
    <td width="20%">image</td>
    <td width="20%">image</td>
</tr>

表根据内容尝试和分隔内容。它导致末端细胞被压扁。