如何使 <td> 响应式答案

【问题标题】：How to make <td> responsive如何使 <td> 响应式
【发布时间】：2016-02-09 23:39:03
【问题描述】：

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

【问题讨论】：

您需要响应式表格吗？尝试过内联样式？
是的 - 我需要类似 display:block;但它不工作
jsfiddle.net/LgLmxmL6
你应该使用 div。
不，没有 div 我只能使用表格

标签： responsive-design html-table mailing

【解决方案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

【讨论】：

有效！唯一的最后一个问题是现在左边的所有 ...jsfiddle.net/LgLmxmL6/2
你希望他们在哪里？
已修复 - 我制作了 tr text-align: center; :) 非常感谢！！