响应式电子邮件：将 table 个单元格 (td) 变为（已清除）块
Responsive e-mail: turn table cells (td) to (cleared) blocks
我有一个基本示例，它应该在移动设备上将这三个 table 单元格显示为块（彼此下方）。
然而这似乎在 iPad、iPhone 和三星 phone 上都行不通。它 在模拟移动显示的常规浏览器和网站上工作（可能是网页），但是在移动设备的实际邮件客户端上查看时，display: block 属性 似乎被忽略了。
有什么遗漏的吗？或者，如果根本不支持 display 属性，还有什么替代方案？
<!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">
<title>Mobilize me</title>
<style type="text/css">
@media only screen and (max-width: 1400px) {
table,tr,td{
width: 100% !important;
display: block !important;
clear: both !important;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="900">
<tr>
<td width="33%" bgcolor="red">
one
</td>
<td width="33%" bgcolor="green">
two
</td>
<td width="33%" bgcolor="blue">
three
</td>
</tr>
</table>
</body>
</html>
值得注意的是 example from this thread 也不起作用。
我认为在撰写本文时可以安全地得出结论，即这种技术不受支持或已经不受支持。
更好的方法是使用 2 种不同的显示器：一种设计用于桌面阅读器，一种设计用于移动阅读器，如下所示（经过测试，有效）：
<!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" />
<style type="text/css">
<!--
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
a:hover,
a:visited,
a:active {
color: #ffffff;
}
@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
body { -webkit-text-size-adjust: none;}
div[id=desktop] {
display:none !important;
width:0px !important;
overflow:hidden !important;
}
div[id=mobile] {
display:block !important;
width:100% !important;
height:auto !important;
max-height:inherit !important;
overflow:visible !important;
}
div[id=mobile] table{
display: block !important;
overflow: auto;
}
div[id=mobile] img{
width: 100%;
}
-->
</style>
<style type="text/css">
div.online p {margin:0; padding:0; margin-bottom:0;}
div.online a:link, div.online a:visited, div.online a:hover, div.online a:active { color: #333333; }
</style>
</head>
<body bgcolor="#e6e6e6" style="margin:0;">
<div class="online" style="margin:10px auto; color: #333333; font-family: verdana; font-size:11px;text-align:center;">
<a href="http://somedomain.com/some/page.htm?lang=nl" target="_blank" style="text-decoration: none; color: #333333;">View in browser</a>
</div>
<div id="desktop">
<table cellpadding="10" cellspacing="0" border="0" style="width:100%; background-color:#e6e6e6;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" style="width:620px; background-color:#ffffff; text-align:left;">
<tr>
<td>
<table cellpadding="0" cellspacing="20" border="0" style="width:620px; text-align:left; background-color:#ffffff;">
<tr>
<td><a href="#" target="_blank"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/header.jpg" border="0" style="display:block;" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="20" border="0">
<tr>
<td valign="top"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/00f_1.gif" style="max-width: 240px;" /></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333;">
<tr>
<td style="font-size:22px; color:#fea900;">Block 1</td>
</tr>
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/filler12.png" /></td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="20" border="0">
<tr>
<td valign="top"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/0f0_1.gif" style="max-width: 240px;" /></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333;">
<tr>
<td style="font-size:22px; color:#fea900;">Block 2</td>
</tr>
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/filler12.png" /></td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="border-bottom: 2px dotted #666666;"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/filler12.png" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="mobile" style="display:none; width:0px; max-height:0px; overflow:hidden;">
<table cellpadding="10" cellspacing="0" border="0" style="width:100%; background-color:#e6e6e6; display:none;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; background-color:#ffffff; text-align:left; display:none;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; text-align:left; background-color:#ffffff; display:none;">
<tr>
<td><a href="#" target="_blank"><img id="header" src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/header.jpg" border="0" style="display:block;" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="display:none;">
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="font-family:Arial; font-size:14px; color:#333333; display:none;">
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/00f_1.gif" /></td>
</tr>
<tr>
<td style="font-size:20px; color:#fea900;">Block 1</td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="display:none;">
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="font-family:Arial; font-size:14px; color:#333333; display:none;">
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/0f0_1.gif" /></td>
</tr>
<tr>
<td style="font-size:20px; color:#fea900;">Block 2</td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="border-bottom: 2px dotted #666666;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="online" style="margin: 10px auto 25px; color: #333333; font-family: verdana; font-size:11px;text-align:center;">
<p align="center">
<a href="http://somedomain.com/some/page.htm?lang=nl" target="_blank" style="text-decoration: none; color: #333333;">Unsubscribe</a> -
<a href="http://somedomain.com/some/page.htm?lang=nl" target="_blank" style="text-decoration: none; color: #333333;">Edit profile</a>
</p>
<p align="center" style="margin-top: 15px;"></p>
</div>
</body>
</html>
使用三个嵌套的 tables 和 "align=" 来复制 "float" 并使用媒体查询将 table 大小调整为 100% display:block 在移动设备上.
我添加了 类 以区分容器和块 table。还添加了一些内联样式来提供帮助。
例如
<!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">
<title>Mobilize me</title>
<style type="text/css">
@media only screen and (max-width: 900px) {
.container {
width: 100% !important;
text-align:center !important;
}
.blocktable {
width: 100% !important;
display: block !important;
margin: 0 auto !important;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="900" class="container" style="border-collapse:collapse;">
<tr>
<td align="center">
<table align="left" bgcolor="RED" cellspacing="0" cellpadding="0" border="0" width="33%" class="blocktable" style="border-collapse:collapse;">
<tr>
<td>one</td>
</tr>
</table>
<table align="left" bgcolor="GREEN" cellspacing="0" cellpadding="0" border="0" width="34%" class="blocktable" style="border-collapse:collapse;">
<tr>
<td>two</td>
</tr>
</table>
<table align="right" bgcolor="BLUE" cellspacing="0" cellpadding="0" border="0" width="33%" class="blocktable" style="border-collapse:collapse;">
<tr>
<td>three</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
我有一个基本示例，它应该在移动设备上将这三个 table 单元格显示为块（彼此下方）。
然而这似乎在 iPad、iPhone 和三星 phone 上都行不通。它 在模拟移动显示的常规浏览器和网站上工作（可能是网页），但是在移动设备的实际邮件客户端上查看时，display: block 属性 似乎被忽略了。
有什么遗漏的吗？或者，如果根本不支持 display 属性，还有什么替代方案？
<!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">
<title>Mobilize me</title>
<style type="text/css">
@media only screen and (max-width: 1400px) {
table,tr,td{
width: 100% !important;
display: block !important;
clear: both !important;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="900">
<tr>
<td width="33%" bgcolor="red">
one
</td>
<td width="33%" bgcolor="green">
two
</td>
<td width="33%" bgcolor="blue">
three
</td>
</tr>
</table>
</body>
</html>
值得注意的是 example from this thread 也不起作用。
我认为在撰写本文时可以安全地得出结论，即这种技术不受支持或已经不受支持。
更好的方法是使用 2 种不同的显示器：一种设计用于桌面阅读器，一种设计用于移动阅读器，如下所示（经过测试，有效）：
<!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" />
<style type="text/css">
<!--
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
a:hover,
a:visited,
a:active {
color: #ffffff;
}
@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
body { -webkit-text-size-adjust: none;}
div[id=desktop] {
display:none !important;
width:0px !important;
overflow:hidden !important;
}
div[id=mobile] {
display:block !important;
width:100% !important;
height:auto !important;
max-height:inherit !important;
overflow:visible !important;
}
div[id=mobile] table{
display: block !important;
overflow: auto;
}
div[id=mobile] img{
width: 100%;
}
-->
</style>
<style type="text/css">
div.online p {margin:0; padding:0; margin-bottom:0;}
div.online a:link, div.online a:visited, div.online a:hover, div.online a:active { color: #333333; }
</style>
</head>
<body bgcolor="#e6e6e6" style="margin:0;">
<div class="online" style="margin:10px auto; color: #333333; font-family: verdana; font-size:11px;text-align:center;">
<a href="http://somedomain.com/some/page.htm?lang=nl" target="_blank" style="text-decoration: none; color: #333333;">View in browser</a>
</div>
<div id="desktop">
<table cellpadding="10" cellspacing="0" border="0" style="width:100%; background-color:#e6e6e6;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" style="width:620px; background-color:#ffffff; text-align:left;">
<tr>
<td>
<table cellpadding="0" cellspacing="20" border="0" style="width:620px; text-align:left; background-color:#ffffff;">
<tr>
<td><a href="#" target="_blank"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/header.jpg" border="0" style="display:block;" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="20" border="0">
<tr>
<td valign="top"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/00f_1.gif" style="max-width: 240px;" /></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333;">
<tr>
<td style="font-size:22px; color:#fea900;">Block 1</td>
</tr>
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/filler12.png" /></td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="20" border="0">
<tr>
<td valign="top"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/0f0_1.gif" style="max-width: 240px;" /></td>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333;">
<tr>
<td style="font-size:22px; color:#fea900;">Block 2</td>
</tr>
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/filler12.png" /></td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="border-bottom: 2px dotted #666666;"><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/filler12.png" /></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="mobile" style="display:none; width:0px; max-height:0px; overflow:hidden;">
<table cellpadding="10" cellspacing="0" border="0" style="width:100%; background-color:#e6e6e6; display:none;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; background-color:#ffffff; text-align:left; display:none;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="width:100%; text-align:left; background-color:#ffffff; display:none;">
<tr>
<td><a href="#" target="_blank"><img id="header" src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/header.jpg" border="0" style="display:block;" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="display:none;">
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="font-family:Arial; font-size:14px; color:#333333; display:none;">
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/00f_1.gif" /></td>
</tr>
<tr>
<td style="font-size:20px; color:#fea900;">Block 1</td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="display:none;">
<tr>
<td>
<table cellpadding="0" cellspacing="10" border="0" style="font-family:Arial; font-size:14px; color:#333333; display:none;">
<tr>
<td><img src="https://www.domain.com/x-http://somedomain.com/some/page/img/props/0f0_1.gif" /></td>
</tr>
<tr>
<td style="font-size:20px; color:#fea900;">Block 2</td>
</tr>
<tr>
<td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="border-bottom: 2px dotted #666666;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="online" style="margin: 10px auto 25px; color: #333333; font-family: verdana; font-size:11px;text-align:center;">
<p align="center">
<a href="http://somedomain.com/some/page.htm?lang=nl" target="_blank" style="text-decoration: none; color: #333333;">Unsubscribe</a> -
<a href="http://somedomain.com/some/page.htm?lang=nl" target="_blank" style="text-decoration: none; color: #333333;">Edit profile</a>
</p>
<p align="center" style="margin-top: 15px;"></p>
</div>
</body>
</html>
使用三个嵌套的 tables 和 "align=" 来复制 "float" 并使用媒体查询将 table 大小调整为 100% display:block 在移动设备上.
我添加了 类 以区分容器和块 table。还添加了一些内联样式来提供帮助。
例如
<!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">
<title>Mobilize me</title>
<style type="text/css">
@media only screen and (max-width: 900px) {
.container {
width: 100% !important;
text-align:center !important;
}
.blocktable {
width: 100% !important;
display: block !important;
margin: 0 auto !important;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="900" class="container" style="border-collapse:collapse;">
<tr>
<td align="center">
<table align="left" bgcolor="RED" cellspacing="0" cellpadding="0" border="0" width="33%" class="blocktable" style="border-collapse:collapse;">
<tr>
<td>one</td>
</tr>
</table>
<table align="left" bgcolor="GREEN" cellspacing="0" cellpadding="0" border="0" width="34%" class="blocktable" style="border-collapse:collapse;">
<tr>
<td>two</td>
</tr>
</table>
<table align="right" bgcolor="BLUE" cellspacing="0" cellpadding="0" border="0" width="33%" class="blocktable" style="border-collapse:collapse;">
<tr>
<td>three</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>