我被附加的电子邮件 HTML 文件卡住了，因为它不能在 Thunderbird 中正确呈现，有时在 AOL、Outlook 等中......（取决于浏览器）。
我在这里尝试做的是显示一些约会网站的个人资料。我发送的所有电子邮件都是响应式的，所以我希望它以这种方式运行： - 580 像素宽的电子邮件：4 个配置文件 - 平板电脑版本：3 个配置文件 - 移动版：2 个配置文件
为了实现这一点，我创建了一个表格（其宽度将根据读取的设备而有所不同）并在里面放了 8 个小表格，期望当大表格的边框在那里时，下一个迷你表格将开始下一行. 但不幸的是，仅在某些桌面客户端和网络邮件上会出现这种情况，但并非全部如此。
你能想出一个解决方案来使这种响应友好吗？
提前致谢 ！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="SayDating" content="True" />
<title>E-mail</title>
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff; }
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;}
html {width: 100%; }
table {border-spacing: 0px;}
p {margin-bottom: 0}
@media only screen and (max-width: 640px) {
body[class=responsive] .deviceWidth {width:440px!important}
body[class=responsive] .fichesannonces { width: 360px !important; }
body[class=responsive] .deviceWidth2 {width:420px!important}
}
@media only screen and (max-width: 479px) {
body[class=responsive] .deviceWidth {width:280px!important}
body[class=responsive] .fichesannonces { width: 240px !important; }
body[class=responsive] .deviceWidth2 {width:266px!important; padding: 0 0 3px 0!important;}
}
</style>
</head>
<body class="responsive">
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 10px 0;" valign="top" width="100%">
<table class="deviceWidth" width="580" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
<tr>
<td>
<table class="deviceWidth2" style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="deviceWidth2" style="padding: 5px 15px 15px 15px; font-family: Tahoma, Geneva, Kalimati, sans-serif; font-size: 13px; color: #000000;" align="left">Bonjour,<br /><br />blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla :</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table class="fichesannonces" width="480" style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="480">
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<a href="LIEN_VERS_LE_PROFIL"><img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" /></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a href="LIEN_VERS_LE_PROFIL" style="font-weight: bold; color: #dd0000; text-decoration: none;">Pseudopseudo</a><br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform: capitalize;">ville</span></span>
</td>
</tr>
<tr>
<td align="left">
<a href="LIEN_VERS_LE_PROFIL" style="font-size: 12px; font-weight: bold; color: #0000ff;">Voir le profil</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<a href="LIEN_VERS_LE_PROFIL"><img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" /></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a href="LIEN_VERS_LE_PROFIL" style="font-weight: bold; color: #dd0000; text-decoration: none;">Pseudopseudo</a><br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
<a href="LIEN_VERS_LE_PROFIL" style="font-size: 12px; font-weight: bold; color: #0000ff;">Voir le profil</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<a href="LIEN_VERS_LE_PROFIL"><img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" /></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a href="LIEN_VERS_LE_PROFIL" style="font-weight: bold; color: #dd0000; text-decoration: none;">onononnonon...</a><br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
<a href="LIEN_VERS_LE_PROFIL" style="font-size: 12px; font-weight: bold; color: #0000ff;">Voir le profil</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<a href="LIEN_VERS_LE_PROFIL"><img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" /></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a href="LIEN_VERS_LE_PROFIL" style="font-weight: bold; color: #dd0000; text-decoration: none;">onononnonon...</a><br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
<a href="LIEN_VERS_LE_PROFIL" style="font-size: 12px; font-weight: bold; color: #0000ff;">Voir le profil</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<a href="LIEN_VERS_LE_PROFIL"><img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" /></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a href="LIEN_VERS_LE_PROFIL" style="font-weight: bold; color: #dd0000; text-decoration: none;">onononnonon...</a><br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
<a href="LIEN_VERS_LE_PROFIL" style="font-size: 12px; font-weight: bold; color: #0000ff;">Voir le profil</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<a href="LIEN_VERS_LE_PROFIL"><img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" /></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a href="LIEN_VERS_LE_PROFIL" style="font-weight: bold; color: #dd0000; text-decoration: none;">onononnonon...</a><br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
<a href="LIEN_VERS_LE_PROFIL" style="font-size: 12px; font-weight: bold; color: #0000ff;">Voir le profil</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<a href="LIEN_VERS_LE_PROFIL"><img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" /></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a href="LIEN_VERS_LE_PROFIL" style="font-weight: bold; color: #dd0000; text-decoration: none;">onononnonon...</a><br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
<a href="LIEN_VERS_LE_PROFIL" style="font-size: 12px; font-weight: bold; color: #0000ff;">Voir le profil</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<a href="LIEN_VERS_LE_PROFIL"><img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" /></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a href="LIEN_VERS_LE_PROFIL" style="font-weight: bold; color: #dd0000; text-decoration: none;">onononnonon...</a><br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
<a href="LIEN_VERS_LE_PROFIL" style="font-size: 12px; font-weight: bold; color: #0000ff;">Voir le profil</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>