是否可以在HTML电子邮件中使用display:block on td来实现响应式表格设计？
chr*_*ris 12 html css html-table html-email media-queries
这篇精彩的文章描述了如何创建响应式表格,这些表格非常适合移动浏览器.
现在我正在尝试将相同的技术应用于HTML电子邮件,但display:block似乎无法在HTML电子邮件中使用.
要重现此问题:
将以下代码保存为HTML页面:
Run Code Online (Sandbox Code Playgroud)<!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>在Safari中打开页面
调整窗口大小以记录表如何以较小的窗口大小更改
按CMD+ i或
File->Mail此页面的内容以创建HTML电子邮件调整电子邮件窗口的大小以记录表格如何仍然正确调整大小
将电子邮件发送给自己并打开它.
现在请注意电子邮件确实如何响应媒体查询但未成功重新设置表格.
我还没有找到一个真正正确显示表格的电子邮件客户端.这是一个死胡同,还是你有解决方法的想法？
Bre*_*ody 14
接受的答案提供了一些很好的信息,但它没有直接解决问题.我最近一直在尝试使用自适应电子邮件,并提出了一些其他人可能会觉得有用的好解决方案.开始了...
要回答这个问题,您可以使用display:block;表格列在某些移动设备(Android,iOS和Kindle)上表现为行.
下面是一个示例,说明如何在移动设备上创建2列布局堆栈(右列顶部的左列).
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%;
}
}
注意:在body[yahoo]选择阻止雅虎从渲染的媒体查询.body我的电子邮件的元素有一个yahoo="fix"属性.
上面的CSS说如果屏幕宽度小于640px那么td带有类的s full应该display:block带有width:100%.
现在,让我们有点发烧友.有时您会希望左侧的列与右侧的列相邻.为此,我们可以使用dir="rtl"包含table来翻转列的顺序.CSS保持不变,这是新的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>
通过添加dir="rtl"我们告诉它颠倒列的顺序.第一列(在HTML流程中)显示在右侧,第二列(在HTML中)显示在左侧.对于小于640px的屏幕,它首先显示第一列(右侧的列),然后显示第二列(左侧的列).
这是完整的HTML和CSS,附有Gmail和iOS 5的屏幕截图.
- 结果我错过了 `<!DOCTYPE>` 和 `<body>` 元素！即使媒体查询和 `<style>` 存在，这也会破坏布局。#面掌 (2认同)
| 归档时间： |
|
| 查看次数： |
34039 次 |
| 最近记录： |