Thunderbird、場合によっては AOL、Outlook など (ブラウザによって異なります) で正しくレンダリングされないため、添付された電子メールの HTML ファイルに行き詰まっています。
私がここでやろうとしていたのは、出会い系サイトの多数のプロフィールを表示することでした。私が送信するすべての電子メールはレスポンシブなので、次のように動作するようにしたかった: - 幅 580 ピクセルの電子メール: 4 つのプロファイル - タブレット バージョン: 3 つのプロファイル - モバイル バージョン: 2 つのプロファイル
これを実現するために、テーブルを作成し (幅は読み取りデバイスによって異なります)、内部に 8 つの小さなテーブルを配置しました。大きなテーブルの境界線がそこにある場合、次のミニ テーブルが次の行を開始することを期待しています。 . 残念ながら、これは一部のデスクトップ クライアントと Web メールにのみ当てはまり、すべてではありません。
このレスポンシブフレンドリーにする解決策を考えられますか?
前もって感謝します ！
<!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>