我正在尝试为一封电子邮件编写一些HTML/CSS，但是无法相应地显示和隐藏内容。我有一个大表，其中包含两个嵌套表。每个嵌套表都是一个页脚，根据屏幕大小显示或隐藏页脚。代码如下

<style>
          @media all and (max-width: 768px) {
            table[table-view=desktop] {
              display: none !important;
            }

            table[table-view=mobile] {
              display: block;
            }
          }

          @media all and (min-width: 769px) {
            table[table-view=mobile] {
              display: none !important;
            }

            table[table-view=desktop] {
              display: block;
            }
          }
        </style>

    <some other stuff here>

<table class="module mobile-view" table-view="mobile" border="0" cellpadding="0" cellspacing="0" data-type="code" role="module" style="table-layout: fixed;">
...
</table>

<table class="module desktop-view" table-view="desktop" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
...
</table>

当在Gmail中查看这个时，两个页脚都会出现。当使用电子邮件构建工具（SendGrid）中的预览工具时，它看起来很好。
我尝试在媒体查询中选择mobile-view和desktop-view类，但没有成功-所以我尝试在HTML中放置属性。
我哪里做错了？