Question

我想更改电子邮件模板的较小屏幕的td宽度。但即使将其风格设定为重要，它也无法正常工作。

CSS

.alignmentColumn {
    width: 25% !important; //for desktop 
    @media only screen and (max-width: 767px) {
        width: 0% !important;  //for mobile screens
    }
}

HTML

<table width="100%" style="border-collapse: collapse;min-height: 100%;">
        <thead style="z-index: 3000; background-color: #2c95dd; position: relative;">
            <tr>
                <th class="alignmentColumn"></th>
                <th width="40%">
                    <span style="font-family: Perpetua, serif; font-weight: 700; font-size: 30px; color: rgb(0, 67, 135); font-weight: 300; float: left;" class="">Test</span>
                 </th
                <th class="alignmentColumn">
                </th>
            </tr>
        </thead>
        <tbody style="max-width: 640px; margin: 0 auto; text-align:left ">
            <tr>
                <td class="alignmentColumn"></td>
                <td>
                    <p style="margin: 30px 0; ">Hello,</p>
                </td>
                <td class="alignmentColumn"></td>
            </tr>
      </tbody>
</table>

Answer 1

这不是你在CSS中使用媒体查询的方式

使用

.alignmentColumn {
    width: 25%;
}
@media only screen and (max-width: 767px) {
    .alignmentColumn {
        width: 0%;  
    }
}

在媒体查询中将宽度设置为td不起作用

1 个答案: