HTML电子邮件移动改变表的位置 [英] html emailer shifting changing the position of tables
本文介绍了HTML电子邮件移动改变表的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好我正在做一个HTML邮件，我真的面临一个大问题，我;米未能解决它。我在我的HTML邮件程序中有两个表格，我希望它能够在手机上响应，我发现文章中谈到了这一点，但他们正在做相反的事情，他有两张桌子，手机上的左桌上去，右手下去。对我来说，我想做相反的事情，我希望正确的人上去，左边下去。
也当我尝试他的文章步骤时，除了iphone的所有手机都很好，当我打开iPhone邮件时，它不起作用。
这里是它在jfiddle
http://jsfiddle.net/heshamelmasry/kusb22tf/
< table class =col350align =leftborder =0cellpadding =0cellspacing =0style = width：100％; max-width：180px;>
< tr>
< td width =180valign =topstyle =border-right：dotted 1px＃0E0E0E;>
< table border =0cellpadding =0cellspacing =0width =100％>
< tbody>< tr>
< td>
< table border =0cellpadding =0cellspacing =0width =100％>
< tbody>< tr>
< td width =25％>< img src =http://imagizer.imageshack.us/a/img910/484/48J327.pngheight =32width =28 style =display：block;>< / td>
< td align =leftwidth =75％style =
font-size：13px;
>< b> FLorem Ipsum is siArticle< / b> < / TD>
< / tr>
< / tbody>< / table>
< / td>
< / tr>
< tr>
< td style =padding：10px 0 0 5px; font-family：verdana，geneva; font-size：11px;>
Lorem Ipsum是si
< / td>
< / tr>
< tr> < td style =padding-left：5px;> < a取代; Readmore< / A> < / TD> < / TR>
< / tbody>< / table>
< hr style =border-top：dotted 1px;>
<！ - 左侧第二部分 - >
< table border =0cellpadding =0cellspacing =0width =100％>
< tbody>< tr>
< td>
< table border =0cellpadding =0cellspacing =0width =100％>
< tbody>< tr>
< td width =25％>< img src =http://imagizer.imageshack.us/a/img910/6493/lF9TWP.pngheight =32width =28 style =display：block;>< / td>
< td align =leftwidth =75％style =
font-family：verdana，geneva;
font-size：13px;
> < b> ILorem Ipsum is si< / b>< / td>
< / tr>
< / tbody>< / table>
< / td>
< / tr>
< tr>
< td style =padding：20px 0 0 5px; font-family：verdana，geneva; font-size：11px;>
BLorem Ipsum是si
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 0;>
< a href =http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprisestarget =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size：11px;
>Lorem Ipsum is si< br> ;< / A>
< / td>
< / tr>
< tr>
< td style =padding：20px 0 0 5px; font-family：verdana，geneva; font-size：11px;>
Lorem Ipsum is siLorem Ipsum is si< / td>
< / tr>
< tr>
< td style =padding：0 0 0 0;>
< a href =http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprisestarget =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size：11px;
>商业洞察力是新油<<<峰; br>< / A>
< / td>
< / tr>
< tr>
< td style =padding：20px 0 0 5px; font-family：verdana，geneva; font-size：11px;>
Lorem Ipsum是si
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 0;>
< a href =http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprisestarget =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size：11px;
>Lorem Ipsum is si< br> ;< / A>
< / td>
< / tr>
< tr>
< td style =padding：20px 0 0 5px; font-family：verdana，geneva; font-size：11px;>
Lorem Ipsum是si
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 0;>
< a href =http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprisestarget =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size：11px;
>Lorem Ipsum is si
< br>< / a>
< / td>
< / tr>
< tr>
< td style =padding：20px 0 0 5px; font-family：verdana，geneva; font-size：11px;>
彭博电视
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 0;>
< a href =http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprisestarget =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size：11px;
>Lorem Ipsum is si< br> ;< / A>
< / td>
< / tr>
< / tbody>< / table>
< hr style =border-top：dotted 1px;>
<！ - - 第三部分开始 - >
< table border =0cellpadding =0cellspacing =0width =100％>
< tbody>< tr>
< td>
< table border =0cellpadding =0cellspacing =0width =100％>
< tbody>< tr>
< td width =25％>< img src =http://imageshack.com/a/img911/9655/SrqD54.pngheight =32width =28style =display：block;>< / td>
< td align =leftwidth =75％>< b style =
font-family：verdana，geneva;
font-size：13px;
> Lorem Ipsum is si< / b>< / td>
< / tr>
< / tbody>< / table>
< / td>
< / tr>< tr>
< td style =padding：10px 0 0 0;>
< a href =http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprisestarget =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size：11px;
> CLorem Ipsum is si< br>< / A>
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 5px; font-family：verdana，geneva; font-size：11px;>
Lorem Ipsum是si
< / td>
< / tr>
< tr>
< td style =padding：10px 0 0 0;>
< a href =http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprisestarget =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size：11px;
> SIBOS< br>< / a>
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 5px; font-family：verdana，geneva; font-size：11px;>
Lorem Ipsum是si
< / td>
< / tr>
< tr>
< td style =padding：10px 0 0 0;>
< a href =http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprisestarget =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size：11px;
> FT-TCS财务领袖晚宴< br> < / A>
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 5px; font-family：verdana，geneva; font-size：11px;>
Lorem Ipsum是si
< / td>
< / tr>
< tr>
< td style =padding：10px 0 0 0;>
< a href =http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprisestarget =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size：11px;
> Lorem Ipsum is si< br>< lt ; / A>
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 5px; font-family：verdana，geneva; font-size：11px;>
fgfddddd
< / td>
< / tr>
< tr>
< td style =padding：10px 0 0 0;>
< a href =target =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size ：11px;
> SSON Fi< br>< / a>
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 5px; font-family：verdana，geneva; font-size：11px;>
S
< / td>
< / tr>
< tr>
< td style =padding：10px 0 0 0;>
< a href =target =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size ：11px;
> S< br>< / a>
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 5px font-family：verdana，geneva; font-size：11px ;;>
Lorem Ipsum简直就是dumm
< / td>
< / tr>
< tr>
< td style =padding：10px 0 0 0;>
< a href =http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprisestarget =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size：11px;
> TCS NYC Marathon< br>< /一个>
< / td>
< / tr>
< tr>
< td style =padding：0 0 0 5px; font-family：verdana，geneva; font-size：11px;>
纽约市11月1日
< / td>
< / tr>
< / tbody>< / table>
< hr style =border-top：dotted 1px;>
<！ - - 第四节开始 - >
< table border =0cellpadding =0cellspacing =0width =100％>
< tbody>< tr>
< td>
< table border =0cellpadding =0cellspacing =0width =100％>
< tbody>< tr>
< td width =25％>< img src =height =32width =28style =display：block;>< / td>
< td align =leftwidth =75％>< b style =
font-family：verdana，geneva;
font-size：13px;
>连结< / b>< / td>
< / tr>
< / tbody>< / table>
< / td>
< / tr>< tr>
< td style =padding：0 0 0 0;>
< a href =target =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size ：11px;
> TCS亚太区< br>< / a>
< / td>
< / tr>< tr>
< td style =padding：0 0 0 0;>
< a href =target =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size ：11px;
> www.tcs.com< br>< / a>
< / td>
< / tr>< tr>
< td style =padding：0 0 0 0;>
< a href =target =_ blankstyle =
text-decoration：none;
padding-left：5px; font-family：verdana，geneva; font-size ：11px;
>联系我们< br>< / a>
< / td>
< / tr>
< / tbody>< / table>
< / td>
< / tr>
< / table>
解决方案
这个问题有很多。对于基本问题如何让右侧的表格适合响应式布局的答案在DIR属性中。在你的布局中，你实际上会在左边的右栏和右栏的左栏上反向制作电子邮件。但是在主表格中，请设置 dir ='rtl'以将其翻转。 （在内部，将容器表的TD设置为 dir ='ltr'以修复内容方向。 / strong>
< table dir =rtl>< tr>
< td dir = ltr>
< table>右栏内容< / table>
< / td>
< td dir =ltr>
< table> ;左列内容< / table>
< / td>
< / tr>< / table>
< / code> b
$ b 完整的例子在这里： http://codepen.io/stg/笔/ rxVWRR
请注意，这是一个快速肮脏的示例 - Gmail客户端完全不支持媒体查询/样式模块。例如桌面第一媒体查询。
编辑 - 手机优先笔： http://codepen.io/stg/pen/xZGjBz
Hello i am doing a html mailer and i'm really facing a big problem and i;m failing to fix it. i have two tables in my html mailer and i want it to be responsive on phones i found article talking about that but they are doing the opposite he has two tables and on phone the left table go up and the right go down. for me i want to do the opposite i want the right one to go up and the left to go down.
also when i tried his article steps it came fine on all the phones except iphone when i open on iphone mail it don't work.
here is it on jfiddle
http://jsfiddle.net/heshamelmasry/kusb22tf/
<table class="col350" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 180px;">
<tr>
<td width="180" valign="top" style="border-right: dotted 1px #0E0E0E;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="25%"><img src="http://imagizer.imageshack.us/a/img910/484/48J327.png" height="32" width="28" style="display: block;"></td>
<td align="left" width="75%" style="
font-size: 13px;
"><b>FLorem Ipsum is siArticle</b></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 5px;font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr> <td style="padding-left: 5px;"> <a>Readmore</a> </td> </tr>
</tbody></table>
<hr style="border-top: dotted 1px;">
<!-- SECOND SECTION AT LEFT SIDE-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="25%"><img src="http://imagizer.imageshack.us/a/img910/6493/lF9TWP.png" height="32" width="28" style="display: block;"></td>
<td align="left" width="75%" style="
font-family: verdana, geneva;
font-size: 13px;
"><b>ILorem Ipsum is si</b></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 5px;font-family: verdana, geneva; font-size: 11px;">
BLorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 0 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">"Lorem Ipsum is si"<br></a>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is siLorem Ipsum is si</td>
</tr>
<tr>
<td style="padding: 0 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">"Business Insights are the New Oil"<br></a>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 0 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">"Lorem Ipsum is si"<br></a>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 0 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">"Lorem Ipsum is si"
<br></a>
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Bloomberg TV
</td>
</tr>
<tr>
<td style="padding: 0 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">"Lorem Ipsum is si"<br></a>
</td>
</tr>
</tbody></table>
<hr style="border-top: dotted 1px;">
<!-- THIRD SECTION START-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="25%"><img src="http://imageshack.com/a/img911/9655/SrqD54.png" height="32" width="28" style="display: block;"></td>
<td align="left" width="75%"><b style="
font-family: verdana, geneva;
font-size: 13px;
">Lorem Ipsum is si</b></td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="padding: 10px 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">CLorem Ipsum is si<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">SIBOS<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">FT-TCS Financial Leaders Dinner<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
Lorem Ipsum is si
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">Lorem Ipsum is si <br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
fgfddddd
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">SSON Fi<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
S
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">S<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px font-family: verdana, geneva; font-size: 11px;;">
Lorem Ipsum is simply dumm
</td>
</tr>
<tr>
<td style="padding: 10px 0 0 0;">
<a href="http://www.bloomberg.com/news/videos/2015-09-10/tcs-focuses-on-chinese-state-enterprises" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">TCS NYC Marathon<br></a>
</td>
</tr>
<tr>
<td style="padding: 0 0 0 5px; font-family: verdana, geneva; font-size: 11px;">
New York City, Nov 1
</td>
</tr>
</tbody></table>
<hr style="border-top: dotted 1px;">
<!-- fourth section start-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="25%"><img src="" height="32" width="28" style="display: block;"></td>
<td align="left" width="75%"><b style="
font-family: verdana, geneva;
font-size: 13px;
">Links</b></td>
</tr>
</tbody></table>
</td>
</tr><tr>
<td style="padding: 0 0 0 0;">
<a href="" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">TCS Asia Pacific<br></a>
</td>
</tr><tr>
<td style="padding: 0 0 0 0;">
<a href="" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">www.tcs.com<br></a>
</td>
</tr><tr>
<td style="padding: 0 0 0 0;">
<a href="" target="_blank" style="
text-decoration: none;
padding-left: 5px; font-family: verdana, geneva; font-size: 11px;
">Contact us<br></a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
解决方案 There's a lot going on in this question. The answer to the basic question "How do I get the table on the right to be on top for the responsive layout," is in the DIR attribute. In your layout, you'll actually build the email backwards with the right column on the left and the left column on the right. However in the main table, set dir='rtl' to flip it. (Inside, set the container table's TDs to dir='ltr' to fix the content direction.
This is pseudocode:
<table dir="rtl"><tr>
<td dir="ltr">
<table>Right column contents</table>
</td>
<td dir="ltr">
<table>Left column contents</table>
</td>
</tr></table>
Full example is here: http://codepen.io/stg/pen/rxVWRR
Note, this was a quick-dirty example - media queries/style blocks are not at all supported by Gmail client for mobile devices. This example has a desktop-first media query.
EDIT - mobile-first pen: http://codepen.io/stg/pen/xZGjBz
这篇关于HTML电子邮件移动改变表的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
