5

我正在做响应式邮件，我需要在表中制作响应式 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>
4

2 回答 2

11

您可以尝试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>

在这里提琴

于 2015-11-09T11:02:58.813 回答
4

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

@media only screen and (min-width: 0px) and (max-width: 700px) {
    td {
        display:inline-block;
        padding:5px;
        width:100%;
    }
}
于 2020-03-12T18:29:30.827 回答