仅使用html/css的浮动表元素

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

具体地说，我想浮动一些元素（整个表或内部列），这样它们就可以均匀地填充可用的宽度，但当可用的宽度不足以容纳所有文本时，它们也会下降到行的旁边

这是我第一次尝试在可用宽度内均匀地分隔元素：

表{
宽度：100%；
最大宽度：600px；
背景色：#eeeeee；
文本对齐：对齐；
}
表：之后{
显示：内联块！重要；
}
表th{
垂直对齐：顶部；
文本对齐：居中；
字体大小：正常；
}
一个
两个
三
四
五
六
七
八
九
十

这是我的第二次尝试，它允许元素在必要时放到下一行，但不能在可用的全宽度内均匀分布元素：

表{
宽度：100%；
最大宽度：600px；
背景色：#eeeeee；
文本对齐：对齐；
}
表th{
显示：内联块！重要；
垂直对齐：顶部；
文本对齐：居中；
字体大小：正常；
}
一个
两个
三
四
五
六
七
八
九
十

是否可以将这两种效果结合起来，以均匀分布元素，但在可用宽度不足时，也允许它们下降到下一行

---

注意：我意识到使用th元素有点不合常规，但这是为了对付Android的怪癖。

请尝试更改为

显示：块
，以降低屏幕尺寸

你可以用表格来做这件事，记住把所有东西都做成内联css，因为gmail会去除头部样式。我已经在我制作的一些响应模板中这样做了。这可以用于所有42个最常见的电子邮件/web客户端

演示：


1.
2.
3.
4.
5.
6.
7.
8.
9
10

Hey@afelixj，这绝对是我想要的效果，但是如果可能的话，我需要在不使用float属性的情况下实现它，因为Outlook不支持它。是否可以拆分为单独的表？是的，当然！我仅限于表，但不介意拆分发生在表或列级别。在表中使用两个
th
进行测试。。现在需要为中心对齐包装表。。。但是
table align=“center”
并没有得到广泛的支持。您好@afelixj，谢谢您的帮助，但该解决方案似乎仍然依赖于float来工作。
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>

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>

<table cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;max-width: 600px;background-color: #eeeeee;">
<tr>
    <td>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    1
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    2
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    3
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    4
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    5
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    6
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    7
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    8
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    9
                </td>
            </tr>
        </table>
        <table align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td width="60" align="center">
                    10
                </td>
            </tr>
        </table>
    </td>
</tr>