html - 无法覆盖 HTML 电子邮件中的显示属性

Question

我有一个相当基本的 HTML 模板，它也是响应式的。它主要按预期工作，除了响应时，我正在使用如下类制作“td”全宽:

@media only screen and (max-width: 480px){
            .templateColumnContainer{
                display:block !important;
                width:100% !important;
            }   
        }

即使在设备模式下使用 devtools 在 Web 浏览器中进行测试时，这也按预期工作，但在实际设备上，即使使用 !important 标志，它也不会覆盖“table-cell”的默认显示属性。我已附上屏幕截图以显示行为。我是否遇到了一个已知的错误，或者是否有一个我缺少的明显解决方案？

Answer 1

Android 引入了一个错误 back in 2015堆叠表数据时 td 不再可堆叠。作为四处走动，您可以使用表头 th 进行堆叠，但一定要像往常一样在 th 或字体上使用 font-style加粗(如果你的内联 CSS 在某处搞砸了，可能会产生级联效应)。

工作示例:

@media only screen and (max-width: 480px){
    .colms th{
        display:block !important;
        width:100% !important;
    }   
}

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="colms">
  <tbody>
    <tr>
      <th style="font-weight:normal;margin:0px;padding:0px;">Column 1</th>
      <th style="font-weight:normal;margin:0px;padding:0px;">Column 2</th>
    </tr>
  </tbody>
</table>

注意:我在 th 中添加了一些样式，以防可能有电子邮件客户端尝试提供边距或填充。字体粗细已设置为正常，因此它与周围的其他文本相匹配。如果要加粗，您可以更改它。