是否可以在HTML电子邮件中使用display：block on td，以实现响应表设计？ [英] Is it possible to use display:block on td in HTML email, to achieve responsive table design?
问题描述
这篇精彩的文章介绍了如何创建响应式表格，非常适合移动浏览器。
现在我想将相同的技术应用到html电子邮件，
重现问题：
strong>1）将以下代码另存为HTML页面：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html>
< head>
< meta charset =utf-8>
< style type =text / css>
@media only screen and（max-width：760px），screen and（max-device-width：480px）{
/ *强制表不再像表一样* /
表，td，tbody，tr {
display：block;
width：100％;
padding：0;
clear：both;
}
td {
/ *像一个行* /
位置：relative！important;
}
}
< / style>
< / head>
< body>
< table style =width：100％;>
< tr>
< td style =border：1px solid red;> 1/1< / td>
< td style =border：1px solid red;> 1/2< / td>
< td style =border：1px solid red;> 1/3< / td>
< / tr>
< tr>
< td style =border：1px solid red;> 2/1< / td>
< td style =border：1px solid red;> 2/2< / td>
< td style =border：1px solid red;> 2/3< / td>
< / tr>
< / table>
< / body>
< / html>
2）在Safari中打开页面
CMD + i / kbd>或 File-> Mail 此页面的内容以创建HTML电子邮件
5）电子邮件窗口以注意表格如何正确调整大小。
6）将电子邮件发送给自己并打开。
7）现在注意电子邮件确实如何响应媒体查询，但未成功重新整理表格。
我还没有找到一个电子邮件客户端实际正确显示表格。
接受的答案提供了一些了不起的信息，但它没有' t直接解决问题。我最近一直在试验响应式电子邮件，并提出了一些好的解决方案，其他人可能认为有用。这里我们去...
要回答这个问题，可以使用 display：block; 在某些移动设备（Android，iOS和Kindle）上表现为行。
这里有一个例子，说明如何在移动设备上创建2列布局堆栈（右列的左侧列）。
HTML
< table class =deviceWidthwidth =100 ％cellpadding =0cellspacing =0border =0style =border-collapse：collapse; mso-table-lspace：0pt; mso-table-rspace：0pt;&
< tr>
< td width =50％align =rightclass =full>
< p style =mso-table-lspace：0; mso-table-rspace：0; padding：0; margin：0;>
< a href =＃>< img src =http://placehold.it/440x440&text=LEFTalt =border =0style =display：block; width：100％; height：auto; />< / a>
< / p>
< / td>
< td width =50％align =leftclass =full>
< a href =＃>< img src =http://placehold.it/440x440&text=RIGHTalt =border =0style =display：block; width：100％; height：auto; />< / a>
< / td>
< / tr>
< / table>
CSS
@media only screen and（max-width：640px）{
body [yahoo] .deviceWidth {width：440px！important; } T
body [yahoo] .full {
display：block;
width：100％;
}
}
注意 code> body [yahoo] 选择器阻止雅虎呈现媒体查询。我的电子邮件的 body 元素有一个 yahoo =fix属性。
上述CSS说如果屏幕宽度小于640像素，则 td full 应该 display：block 与 width：100％。
现在，让我们来一位鸽友。有时候，你希望左边的列叠加到右边的列的下面。为此，我们可以在包含表上使用 dir =rtl来翻转列的顺序。 CSS保持不变，这里是新的HTML：
HTML
< table class =deviceWidthdir =rtlwidth =100％cellpadding =0cellspacing =0border =0style =border-collapse：collapse ; mso-table-lspace：0pt; mso-table-rspace：0pt;>
< tr>
< td width =50％dir =ltralign =rightclass =full>
< p style =mso-table-lspace：0; mso-table-rspace：0; padding：0; margin：0;>
< a href =＃>< img src =http://placehold.it/440x440&text=RIGHTalt =border =0style =display：block; width：100％; height：auto; />< / a>
< / p>
< / td>
< td width =50％dir =ltralign =leftclass =full>
< a href =＃>< img src =http://placehold.it/440x440&text=LEFTalt =border =0style =display：block; width：100％; height：auto; />< / a>
< / td>
< / tr>
< / table>
通过添加 dir =rtl我们要告诉它反转列的顺序。第一列（在HTML流程中）显示在右侧，第二列（在HTML中）在左侧。对于小于640像素的屏幕，它首先显示第一列（右侧列），第二列显示第二列（左边列）。
a href =http://jsfiddle.net/brettdewoody/xnJ9Q/ =nofollow noreferrer>完整的HTML和CSS 以及来自Gmail和iOS 5的屏幕截图。
This fantastic article describes how to create responsive tables which scale fabulously to mobile browsers.
Now I'm trying to apply the same technique to html emails but display:block just won't seem to work in html emails.
To reproduce the issue:
1) Save the following code as an HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@media only screen and (max-width: 760px), screen and (max-device-width: 480px) {
/* Force table to not be like tables anymore */
table, td, tbody, tr{
display: block;
width:100%;
padding:0;
clear:both;
}
td {
/* Behave like a "row" */
position: relative !important;
}
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid red;">1/1</td>
<td style="border:1px solid red;">1/2</td>
<td style="border:1px solid red;">1/3</td>
</tr>
<tr>
<td style="border:1px solid red;">2/1</td>
<td style="border:1px solid red;">2/2</td>
<td style="border:1px solid red;">2/3</td>
</tr>
</table>
</body>
</html>
2) Open the page in Safari
3) Resize the window to note how the table changes with a smaller window-size
4) Press CMD+i or File->Mail Contents of this page to create a HTML email
5) Resize the email window to note how the table still resizes correctly
6) Send the email to yourself and open it.
7) Now notice how the email indeed responds to the media query but unsuccessfully restyles the table.
I have yet to find an email client that actually displays the table correctly. Is this a dead-end or do you have ideas of workarounds?
The accepted answer provides some great info but it doesn't address the question directly. I've been experimenting with responsive emails recently and have come up with some good solutions others might find useful. Here we go...
To answer the question, you can use display:block; to make table columns behave as rows on some mobile devices (Android, iOS and Kindle).
Here's an example showing how you would make a 2 column layout stack (left columns on top of right column) on mobile devices.
HTML
<table class="deviceWidth" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td width="50%" align="right" class="full">
<p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
<a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>
</p>
</td>
<td width="50%" align="left" class="full">
<a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>
</td>
</tr>
</table>
CSS
@media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; } T
body[yahoo] .full {
display:block;
width:100%;
}
}
Note: The body[yahoo] selector prevents Yahoo from rendering the media queries. The body element of my email has a yahoo="fix" attribute.
The above CSS says that if the screen is less than 640px in width then the tds with a class of full should display:block with width:100%.
Now, let's get a bit fancier. Sometimes you'll want the column on the left to stack BELOW the column on the right. To do this we can use dir="rtl" on the containing table to flip the order of the columns. The CSS stays the same, here's the new HTML:
HTML
<table class="deviceWidth" dir="rtl" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td width="50%" dir="ltr" align="right" class="full">
<p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
<a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>
</p>
</td>
<td width="50%" dir="ltr" align="left" class="full">
<a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>
</td>
</tr>
</table>
By adding the dir="rtl" we're telling it to reverse the order of the columns. The first column (in the flow of the HTML) is being displayed on the right, the second column (in the HTML) on the left. For screens smaller than 640px it displays the first column (the column on the right) first, and the second column (the column on the left) second.
Here's the full HTML and CSS and a screenshots from Gmail and iOS 5 are attached.
这篇关于是否可以在HTML电子邮件中使用display：block on td，以实现响应表设计？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
