包含 100% 宽度图像的固定宽度表格 - 右边框缺失答案

【问题标题】：fixed width table containing 100% width image - border right missing包含 100% 宽度图像的固定宽度表格 - 右边框缺失
【发布时间】：2014-03-25 04:23:04
【问题描述】：

我正在创建响应式 HTML 电子邮件。在较大的视口中，我的表格固定宽度为 600 像素。表格内是 100% 宽度的图像，边框为 1px。在某些电子邮件客户端中，右侧边框未显示。我想这是因为 100% 宽度加上 2px 超过 600px？我该如何克服这个问题？

我的图片有 display:block（如果感兴趣的话）。我已经尝试过 box-sizing:border-box 但它似乎不起作用......我是否将此样式添加到图像或表格中，或两者都添加，我在哪里将它添加到我的代码中？

感谢您的帮助

标记

【问题讨论】：

标签： email border

【解决方案1】：

我自己还没有尝试过，但其中一种应该适合你。这是一种流畅的技术，可以（希望）在任何大小的视口上的任何电子邮件客户端中工作：

<!-- Simple - but will have the image area set as the border color (black) when image is not loaded -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100%" bgcolor="#000000" style="padding:1px;">
      <img alt="" src="http://placehold.it/350x350" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
  </tr>
</table>

<br><br>

<!-- Setting a background color in a nested table to hide border color -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100%" bgcolor="#000000" style="padding:1px;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
          <td>
            <img alt="" src="http://placehold.it/350x350" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

【讨论】：