是否可以在 HTML 电子邮件中使用 display:block on td 来实现响应式表格设计? [英] Is it possible to use display:block on td in HTML email, to achieve responsive table design?

查看：20 发布时间：2021/12/28 11:11:48 html css html-table media-queries html-email

本文介绍了是否可以在 HTML 电子邮件中使用 display:block on td 来实现响应式表格设计?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这篇精彩的文章描述了如何创建响应式表格，这些表格可以完美地适应移动浏览器.

现在我正在尝试将相同的技术应用于 html 电子邮件，但 display:block 似乎不适用于 html 电子邮件.

重现问题:

将以下代码另存为 HTML 页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><头><meta charset="utf-8"><style type="text/css">@media only screen and (max-width: 760px), screen and (max-device-width: 480px) {/* 强制表不再像表 */表，td，tbody，tr{显示:块；宽度:100%；填充:0;清除:两者；}TD{/* 表现得像一个行" */位置:相对！重要；}}</风格><身体><table style="width:100%;"><tr><td style="border:1px 纯红色;">1/1</td><td style="border:1px 纯红色;">1/2</td><td style="border:1px 纯红色;">1/3</td></tr><tr><td style="border:1px 纯红色;">2/1</td><td style="border:1px 纯红色;">2/2</td><td style="border:1px 纯红色;">2/3</td></tr>

在 Safari 中打开页面
调整窗口大小以注意表格在较小窗口大小下的变化
按 CMD+i 或 File->Mail 此页面的内容创建 HTML 电子邮件
调整电子邮件窗口的大小以注意表格仍然正确调整大小
将电子邮件发送给自己并打开它.
现在注意电子邮件确实是如何响应媒体查询的，但没有成功地重新设计表格.

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

解决方案

接受的答案提供了一些很好的信息，但它没有直接解决问题.我最近一直在试验响应式电子邮件，并提出了一些其他人可能会觉得有用的好的解决方案.来了……

要回答这个问题，您可以使用 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%; 高度:自动;"/></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%; 高度:自动;"/></a></td></tr>

CSS

@media only screen and (max-width: 640px) {body[yahoo] .deviceWidth {width:440px!important;}身体[雅虎] .full {显示:块；宽度:100%；}}

注意: body[yahoo] 选择器阻止雅虎呈现媒体查询.我的电子邮件的 body 元素有一个 yahoo="fix" 属性.

上面的 CSS 说，如果屏幕宽度小于 640px，那么 td 的类是 full 应该 display:block 使用 width:100%.

现在，让我们更狂热一点.有时您会希望左侧的列堆叠在右侧的列下方.为此，我们可以在包含的 table 上使用 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%; 高度:自动;"/></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%; 高度:自动;"/></a></td></tr>

通过添加 dir="rtl" 我们告诉它颠倒列的顺序.第一列(在 HTML 流中)显示在右侧，第二列(在 HTML 中)显示在左侧.对于小于 640px 的屏幕，它首先显示第一列(右侧的列)，然后显示第二列(左侧的列).

这是完整的 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:

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>

Open the page in Safari
Resize the window to note how the table changes with a smaller window-size
Press CMD+i or File->Mail Contents of this page to create a HTML email
Resize the email window to note how the table still resizes correctly
Send the email to yourself and open it.
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屋！

查看全文

是否可以在 HTML 电子邮件中使用 display:block on td 来实现响应式表格设计? [英] Is it possible to use display:block on td in HTML email, to achieve responsive table design?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

是否可以在 HTML 电子邮件中使用 display:block on td 来实现响应式表格设计? [英] Is it possible to use display:block on td in HTML email, to achieve responsive table design?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭