包含100%宽度图像的固定宽度表格-缺少右侧边框
包含100%宽度图像的固定宽度表格-缺少右侧边框
提问于 2014-03-25 04:09:42
我正在创建一个响应式的HTML电子邮件。在较大的视口中，我的表格宽度固定为600px。表格内部是100%宽度的图片，边框为1px。在某些电子邮件客户端中，未显示右侧边框。我猜这是因为100%的宽度，加上2px超过600px？我该如何克服这个问题？
我的图片有display:block (如果你感兴趣的话)。我尝试过框大小调整:边框大小调整，但似乎不起作用……我是将此样式添加到图像或表中，还是两者都添加，在何处将其添加到代码中？
谢谢你的帮助
标记
回答 1
Stack Overflow用户
发布于 2014-03-25 04:17:44
我自己还没试过，但其中一个应该对你有效。这是一种流畅的技术，可以(希望)在任何大小的视口上的任何电子邮件客户端中工作：
<!-- 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22619598
复制相关文章
相似问题
腾讯云开发者
