是否可以在 HTML 电子邮件中使用 display:block on td 来实现响应式表格设计？

Question

提问by Chris

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:blockjust won't seem to work in html emails.

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

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+ior File->MailContents 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.

将以下代码另存为 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>

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

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?

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

Answer 1

回答by Brett DeWoody

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).

要回答这个问题，您可以使用display:block;使表格列在某些移动设备（Android、iOS 和 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.

这是一个示例，展示了如何在移动设备上制作 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%;
    }
}

Note:The body[yahoo]selector prevents Yahoo from rendering the media queries. The bodyelement of my email has a yahoo="fix"attribute.

注：该body[yahoo]选择阻止雅虎从渲染的媒体查询。body我的电子邮件的元素有一个yahoo="fix"属性。

The above CSS says that if the screen is less than 640px in width then the tds with a class of fullshould display:blockwith width:100%.

上面的 CSS 说，如果屏幕宽度小于 640px，那么tds 的类full应该display:block是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 tableto flip the order of the columns. The CSS stays the same, here's the new HTML:

现在，让我们变得更狂热一点。有时您会希望左侧的列堆叠在右侧的列下方。为此，我们可以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>

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.

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

Here's the full HTML and CSSand a screenshots from Gmail and iOS 5 are attached.

这是完整的 HTML 和 CSS以及 Gmail 和 iOS 5 的屏幕截图。

Gmail iOS 5 Android 4

Gmail iOS 5 安卓 4

Answer 2

回答by Luca

I suggest you refer to this: http://www.campaignmonitor.com/css/

我建议你参考这个：http: //www.campaignmonitor.com/css/

While not very up to date, it's a great resource in terms of css support for emails. Unfortunately when building email templates you need to consider not only browsers, but different clients e.g. Outlook and the css support they offer is notoriously poor.

虽然不是最新的，但它在对电子邮件的 css 支持方面是一个很好的资源。不幸的是，在构建电子邮件模板时，您不仅需要考虑浏览器，还需要考虑不同的客户端，例如 Outlook 和它们提供的 css 支持是出了名的差。

On top of that, mail providers like gmail tend to strip certain parts of your document (e.g. the head tag) so it becomes really difficult to apply any responsive design concepts to an audience (the email clients) that has very poor support for even basic css.

最重要的是，像 gmail 这样的邮件提供商倾向于剥离文档的某些部分（例如 head 标签），因此很难将任何响应式设计概念应用于对即使是基本的支持也很差的受众（电子邮件客户端）。 css。

Answer 3

回答by Maxim

I was able to make it work, here is the result: https://litmus.com/pub/d9ac198

我能够让它工作，结果如下：https: //litmus.com/pub/d9ac198

Here is a code I use to force td to behave like rows:

这是我用来强制 td 表现得像行的代码：

table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
    display: block !important;
    width: 100%;
}

Answer 4

回答by cptstarling

Another approach is to work with 2 designs in one e-mail: one for desktop readers, and one for mobile readers, as demosntrated here.

另一种方法是在一封电子邮件中使用两种设计：一种用于桌面阅读器，一种用于移动阅读器，如此处所示。

Answer 5

回答by heyhugo

I have found that using media queries to stack td elements for mobile devices like this

我发现使用媒体查询为这样的移动设备堆叠 td 元素

td[class="stack-content"] {display:block !important}

seems to work for most devices with the exception of windows phone 7 which apparently does not support the display: block property.

似乎适用于大多数设备，但 Windows Phone 7 显然不支持 display: block 属性。

Answer 6

回答by Dinis Correia

I'm having the exact same issue! I thought it would just work on Mail on iOS devices, but it happens exactly what you're saying - it works until you actually send it.

我有完全相同的问题！我认为它只适用于 iOS 设备上的邮件，但它确实发生了你所说的 - 它在你实际发送之前一直有效。

@Luca, we know support isn't great, but media queries are ignored by most so it's a nice touch to add if you want the email to look a bit better on modern email clients. Outlook and others would still get the 'normal' HTML email, without the media queries/responsive tables.

@Luca，我们知道支持不是很好，但是大多数人都忽略了媒体查询，因此如果您希望电子邮件在现代电子邮件客户端上看起来更好，那么添加它是一个不错的选择。Outlook 和其他人仍然会收到“正常”的 HTML 电子邮件，没有媒体查询/响应表。

是否可以在 HTML 电子邮件中使用 display:block on td 来实现响应式表格设计？

提问by Chris

回答by Brett DeWoody

回答by Luca

回答by Maxim

回答by cptstarling

回答by heyhugo

回答by Dinis Correia

相关推荐

最近更新

标签

是否可以在 HTML 电子邮件中使用 display:block on td 来实现响应式表格设计？

提问by Chris

回答by Brett DeWoody

回答by Luca

回答by Maxim

回答by cptstarling

回答by heyhugo

回答by Dinis Correia

相关推荐

Html XPath 查询：从标签中获取属性 href

Html 内联 CSS 可以应用于嵌套在样式元素中的子元素吗？

Html rails form_for 样式

Html 使用html和css创建水印

相关推荐

最近更新

标签