响应电子邮件：将表格单元格（td）转换为（已清除）块 [英] Responsive e-mail: turn table cells (td) to (cleared) blocks
问题描述
我有这个基本示例，应该在移动设备上显示这三个表单元格作为块（在彼此之下）。
I have this basic example that should display these three table cells as blocks (underneath each other) on mobile devices.
然而，这似乎没有办法在iPad，iPhone以及三星手机上。 可以在模拟移动显示的常规浏览器和网站上工作（对于网页可能），但是在查看移动设备的实际邮件客户端时， display：block 属性似乎被忽略。
Yet this doesn't seem to work out on iPad, iPhone, nor on a Samsung phone. It does work on regular browsers and websites that simulate a mobile display (for web pages probably), but when viewing on actual mail clients of mobile devices, the display: block property seems to be ignored.
有没有什么丢失？或者如果显示 -attribute根本不被支持，可以选择什么？
Is there anything that's missing? Or if the display-attribute isn't supported at all, what is the alternative?
<!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>
Remarkably the example from this thread isn't working either.
推荐答案
使用带有align =的三个嵌套表来复制float，并使用媒体查询来将表格大小调整为100％，并显示在移动设备上的显示：块。
Use three nested tables with "align=" to replicate "float" and have a media query to resize table to 100% with display:block on mobile.
用于区分容器和块表之间的类。还添加了几个内联样式来帮助。
I added classes to differentiate between container and block tables. Also added a couple inline styles to help.
EG
<!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>
这篇关于响应电子邮件：将表格单元格（td）转换为（已清除）块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
