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

Question

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

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

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

Answer 1

Android 在堆叠 table 数据时引入了错误 back in 2015 数据 td 不再可堆叠。作为四处走动，您可以使用 table head 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 中添加了一些样式，以防可能有电子邮件客户端尝试提供边距或填充。字体粗细已设置为正常，因此它与周围的其他文本相匹配。如果要加粗，您可以更改它。