html - 仅使用 html/css float 表格元素

Question

我目前正在尝试编写一个响应式电子邮件模板，因此仅限于使用 html 表格和内联 css(没有 javascript 或媒体查询的帮助)以支持尽可能多的电子邮件客户端。

具体来说，我想 float 一些元素(整个表格或内部列)，以便它们均匀地填充可用宽度，但当可用宽度不足以容纳所有文本时，它们也会掉落到行的旁边.

这是我第一次尝试在可用宽度内均匀分布元素: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 的怪癖。

Answer 1

请尝试更改为 display:block 以获得较小的屏幕尺寸。

http://jsfiddle.net/afelixj/noy7ur7a/2/