メルマガでiphoneへのメールの際のレイアウトを直したい！
解決したいこと
今gasの機能を使ってメールマガジンを作成しているのですが、
outlookを基準に作っていまして基本的にテーブルタグを使ってレイアウトを作っております。
ただ、テーブルタグを使うとoutlookではalign="center"が効き綺麗に映るのですが、
iphoneのメーラーで確認すると右側に謎の空間が出来、レイアウトが左に寄ってしまいます。
つまりこの右の空間を消したのですが何か良い方法などはないでしょうか？
<body>
<div class="main-content" style="margin: 0 auto;">
<table class = "centerTable" width="640" border="0" cellspacing="0" cellpadding="0" align="center" style="width: 640px; margin: 0 auto;" >
<tr>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
<td width = "520" style="font-size: 0; line-height: 0;">
<a href="http://www.fujita-jpn.co.jp/">
<div><img src='cid:panfImg' alt="" width= "100%" style="width: 100%;"></div>
</a>
</td>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
</tr>
<tr>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
<td width = "520" >
<table width="520" border="0" cellspacing="0" cellpadding="0" style="width: 520px;" >
<tr><td align="center" style="font-size: 1.7rem; line-height: 1.7;"><b>【Tokyo Tokyo ALL JAPAN COLLECTION】出展のお知らせ</b></td></tr>
<tr><td height="10" style="font-size: 0; line-height: 0;"></td></tr>
<tr>
<td align="center" style="font-size: 1.7rem; line-height: 1;" @media="screen and (max-width:480px){ style='font-size: 3.0rem;}">
毎々格別のお引き立てをいただき有難うございます。<br>コロナ禍で規模も縮小されていますが、東京2020大会が開催しました。それに伴い東京都主催の「～東京、日本各地の魅力を東京スポーツスクエアから発信～Tokyo Tokyo ALL JAPAN COLLECTION」というイベントに参加致します。
東京、日本全国が誇る伝統芸能や技術、特産品、豊かな食の世界などのあらゆる要素が大集合し、どなたでもお楽しみいただけるイベントです。
せひご来場ください。<br>
</td>
</tr>
<tr><td height="10" style="font-size: 0; line-height: 0;"></td></tr>
</table>
</td>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
</tr>
<tr>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
<td width = "520" height= "40"></td>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
</tr>
<tr>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
<td width = "520">
<table>
<tr>
<td width = "40" style="font-size: 0; line-height: 0;"></td>
<td width = "480">
<table width = "100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td style="font-size: 1.3rem; ">出展日：2021年㈮ 11：30～18：30</td>
</tr>
<tr>
</tr>
<tr>
<td style="font-size: 1.3rem; line-height: 1.4;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width = "64" style="font-size: 0; line-height: 0;"></td>
<td width = "400" style="font-size: 1.3rem; line-height: 1.4;">〒100-0005 東京都千代田区丸の内3-8-3</td>
<td width = "0" style="font-size: 0; line-height: 0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"style="font-size: 1.3rem; line-height: 1.2;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width = "59" style="font-size: 0; line-height: 0;"></td>
<td width = "400" style="font-size: 1.3rem; line-height: 1.4;">＊東京交通会館向かいの赤い屋根が目印の建物です</td>
<td width = "0" style="font-size: 0; line-height: 0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" height ="30" style ="font-size: 0px; line-height: 1.4;"></td>
</tr>
<tr>
<td align = "center" style="font-size: 1.3rem; line-height: 1.4;">展示品</td>
</tr>
<tr>
<td style="font-size: 1.3rem; line-height: 1.4;">/td>
</tr>
<tr>
<td align="center" style="font-size: 1.3rem; line-height: 1.7;">CCD・CMOSカメラ</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td width = "0" style="font-size: 0; line-height: 0;"></td>
</tr>
</table>
</td>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
</tr>
<tr>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
<td width = "520" style="font-size: 0; line-height: 0;">
<table width ="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td height="20" width="100%" style="font-size: 0; line-height: 0;"></td>
</tr>
<tr>
<td height="2" width="100%" bgcolor="green"></td>
</tr>
<tr>
<td height="20" width="100%"style="font-size: 0; line-height: 0;"></td>
</tr>
</table>
</td>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
</tr>
<tr>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
<td width = "520" >
<table width ="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td width ="40" style="font-size: 0; line-height: 0;"></td>
<td width ="150" >
<table>
<tr>
<td width="100%" style="font-size: 1.3rem;">
<a href="">
<img width="100%" src='cid:panfJidori' alt="">
</a>
</td>
</tr>
<tr>
<td width="100%" align="center" style="font-size: 1.5rem; line-height: 2;">カタログの請求</td>
</tr>
<tr>
<td width="100%" align="center"style="font-size: 1.3rem;">では三種類のカタログからお選びいただけます</td>
</tr>
<tr>
<td width="100%" align="center"style="font-size: 1.3rem;">請求はこちらから</td>
</tr>
</table>
</td>
<td width ="40" style="font-size: 0; line-height: 0;"></td>
<td width = "150">
<table>
<tr>
<td width="100%" style="font-size: 1.3rem;">
<a href="">
<img width="100%" src='cid:panfNaishi' alt="">
</a>
</td>
</tr>
<tr>
<td width="100%" align="center" style="font-size: 1.5rem; line-height: 2;">カタログの請求</td>
</tr>
<tr>
<td width="100%" align="center"style="font-size: 1.3rem;">では三種類のカタログからお選びいただけます</td>
</tr>
<tr>
<td width="100%" align="center"style="font-size: 1.3rem;">請求はこちらから</td>
</tr>
</table>
</td>
<td width ="40" style="font-size: 0; line-height: 0;"></td>
</tr>
</table>
</td>
<td width = "60" style="font-size: 0; line-height: 0;"></td>
</tr>
</table>
</div>
</body>
自分で試したこと
iphoneのメーラーはcss制御ができるのでcssで制御してテーブルタグを使わずにレイアウトを作ると右側の空間はできなかった。
このことからtableタグをdivタグの入れ子にしてmargin: 0 auto;など記述した際は、テーブルタグのレイアウト同様右側に空間が出来てしまいmargin: 0 autoは効いていなかった。
iphone上でのソースコードの状況が分かる方法など解決策につながる情報があれば伝えてほしい。
ネット上でこの現象が起きてる方がいないので、テーブルタグでレイアウトを作る際の注意があれば伝えてほしいです。 お願いします。
0