无法覆盖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

当堆栈表数据td不再可堆栈时，Android引入了一个错误back in 2015。到处走走时，您可以使用表头th进行堆叠，但请确保在font-style上照常使用th或字体加粗（如果您的内联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添加了一些样式，以防万一可能有电子邮件客户端尝试提供空白或填充。字体粗细已设置为正常，因此它与周围的其他文本匹配。如果要加粗，则可以更改它。