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>

Fiddle here

Answer 2

您可以创建一个媒体查询，以强制所有td元素在某个屏幕宽度下相互下降。这样可以确保它们都同时变为垂直对齐。如果您要生成打印报告，它还将保留表格的水平对齐打印格式。

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

如何做出回应

2 个答案: