【发布时间】：2015-06-22 04:41:15
【问题描述】：
我目前正在尝试编写一个响应式电子邮件模板，因此仅限于使用 html 表格和内联 css（没有 javascript 或媒体查询的帮助）以支持尽可能多的电子邮件客户端。
具体来说，我想浮动一些元素（整个表格或内部列），以便它们均匀地填充可用宽度，但当可用宽度不足以容纳所有文本时，它们也会下降到下一行.
这是我第一次尝试在可用宽度内均匀地分隔元素：http://jsfiddle.net/aerospatiale/noy7ur7a/。
table {
width: 100%;
max-width: 600px;
background-color: #eeeeee;
text-align: justify;
}
table:after {
display: inline-block !important;
}
table th {
vertical-align:top;
text-align: center;
font-weight:normal;
}
<table align="center">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Eight</th>
<th>Nine</th>
<th>Ten</th>
</tr>
</table>
这是我的第二次尝试，它允许元素在必要时下降到下一行，但不会在可用的整个宽度内均匀分布元素：http://jsfiddle.net/5qsjn2ys/。
table {
width: 100%;
max-width: 600px;
background-color: #eeeeee;
text-align: justify;
}
table th {
display: inline-block !important;
vertical-align:top;
text-align: center;
font-weight:normal;
}
<table align="center">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
<th>Six</th>
<th>Seven</th>
<th>Eight</th>
<th>Nine</th>
<th>Ten</th>
</tr>
</table>
是否可以结合这两种效果来均匀分布元素，同时在可用宽度不足时允许它们下降到下一行？
注意：我意识到使用 th 元素有点不正统，但这是为了对抗 Android 怪癖。
【问题讨论】：
标签： html css responsive-design html-email