是否可以在HTML电子邮件中的td上使用display:block来实现响应表设计?

前端之家收集整理的这篇文章主要介绍了是否可以在HTML电子邮件中的td上使用display:block来实现响应表设计?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这篇精彩的文章介绍了如何创建响应表,将其精美地扩展到移动浏览器.

现在我试图将相同的技术应用于html电子邮件,但显示:块似乎不会在html电子邮件中工作.

重现问题:

1)将以下代码保存为HTML页面

<!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)在Safari中打开页面

3)调整窗口大小以注意表格如何随窗口大小而变化

4)按CMD i或File->此页面邮件内容创建一个HTML电子邮件

5)调整电子邮件窗口的大小,注意表格如何正确调整大小

6)发送电子邮件给自己并打开它.

7)现在注意电子邮件确实如何响应媒体查询,但不成功地重新设置表.

我还没有找到一个真正显示表的电子邮件客户端.这是一个死胡同还是有解决办法的想法?

解决方法

接受的答案提供了一些很好的信息,但它并没有直接解决问题.我最近一直在尝试回应电子邮件,并提出了一些其他人可能会发现有用的好方法.开始了…

要回答这个问题,可以使用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%;
    }
}

注意:身体[yahoo] selector prevents Yahoo from rendering the media queries.我的电子邮件的body元素有一个yahoo =“fix”属性.

上面的CSS表示,如果屏幕宽度小于640px,则具有full类型的tds应该显示:block,宽度为100%.

现在,让我们来点点心.有时你会希望左边的列堆叠在右边的列.为此,我们可以在包含表上使用dir =“rtl”来翻转列的顺序. 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的屏幕,首先显示第一列(右侧的列),第二列(左侧的列)为第二列.

这是full HTML and CSS,附有Gmail和iOS 5的屏幕截图.

原文链接:https://www.f2er.com/html/227914.html

猜你在找的HTML相关文章