如何使<td>响应

Question

我正在做响应式邮件，我需要在表中制作响应式td（没有类或使用媒体查询）。

简单来说 - 我需要在小型设备上将 td 排列在它们下面。

<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width:100%;  background-color: #fff; max-width:600px;">     
  <tr>
    <td><a href="https://www.blahblah.com/"><img src="pic" /></a></td>
    <td><a href="https://blahblah2.com/><img src="pic"  /></a></td>
    <td><a href="http://www.blahblah3.com/><img src="pic" /></a></td>
    <td><a href="http://www.blahblah4.com/><img src="pic" /></a></td>
  </tr>                                           
</table>

Answer 1

您可以对表格中的每一列尝试

display:inline-block

。当屏幕宽度减小时，它会使列移动到每列下方。 正如您所提到的，您不需要类，因此我为每列编写内联样式。试试这个代码：

<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width: 100%;
        background-color: #fff; max-width: 600px;">
        <tr>
            <td style="display: inline-block; padding: 5px;">
                <p>
                    hellohello</p>
            </td>
            <td style="display: inline-block; padding: 5px;">
                <p>
                    hellohello</p>
            </td>
            <td style="display: inline-block; padding: 5px;">
                <p>
                    hellohello</p>
            </td>
            <td style="display: inline-block; padding: 5px;">
                <p>
                    hellohello</p>
            </td>
        </tr>
    </table>

在这里摆弄

Answer 2

您可以创建一个媒体查询来强制所有 td 元素在特定的屏幕宽度下彼此下降。这确保它们同时垂直对齐。如果您要生成打印报告，它还会保留表格的水平对齐打印格式。

@media only screen and (min-width: 0px) and (max-width: 700px) {
    td {
        display:inline-block;
        padding:5px;
        width:100%;
    }
}

Answer 3

感谢您为 Stack Overflow 提供答案！

请务必回答问题。提供详细信息并分享您的研究！ 但要避免……

寻求帮助、澄清或回应其他答案。 根据意见作出陈述；用参考资料或个人经验来支持它们。 要了解更多信息，请参阅我们关于撰写精彩答案的提示。