如何使<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%;
    }
}