Outlook中table设置display:none后无法用display:table重新显示如何解决

问题根因 #

Windows桌面版Outlook用的是Word的HTML渲染引擎，和浏览器内核逻辑完全不一样，你碰到的问题是它的两个原生缺陷导致的：

1. 不支持标准CSS选择器优先级计算，你写的body table和直接写table在它看来优先级完全一样，后面带!important的规则覆盖不了前面同优先级的规则
2. 对display: table属性有bug，给table元素设置这个值的时候，样式不会作用在表格本身，反而跑到内部的tr、td上，所以才会出现表格没藏、内容没了的怪现象

可用解决方法 #

• 直接调整覆盖的CSS规则，不要用后代选择器，换Outlook认的属性值
  你追加下面这段样式就行：

table {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}
* table {
  display: block !important;
}

通配符开头的选择器在Outlook的逻辑里优先级比普通标签选择器高，能覆盖之前的display: none，而且display: block是Outlook对块级元素支持最稳定的属性，不会触发子元素隐藏的bug。

• 用Outlook专属条件注释加强制规则
  如果能在邮件里插入条件注释，直接加这段，只有Windows桌面版Outlook能识别，优先级比普通样式表高很多，不会被钓鱼邮件的样式覆盖：

<!--[if mso]>
<style>
table {
  display: block !important;
}
</style>
<![endif]-->

其他邮件客户端会直接忽略这段内容，不会影响其他平台的显示效果。

内容的提问来源于stack exchange，提问作者jdgregson