如果达到最大宽度，使表格溢出到新行？

【问题标题】：Make tables overflow to new line if max-width reached?如果达到最大宽度，使表格溢出到新行？
【发布时间】：2017-08-13 22:15:10
【问题描述】：

我正在尝试设计一个表格，该表格将以某种图形形式显示从数据库中提取的数据。当集体 'td' 达到表格设置的最大宽度时，我希望表格具有溢出到下一行的功能。

示例：表格宽度设置为 30%（为了论证的缘故，假设为 100px）并且 tds 的宽度为 10px。当输入 11 个 tds 时，第 11 个移动到换行符并继续显示在那里。

这是我目前所拥有的：

HTML：

<table>
    <tr>
        <td></td>
        <td class='green'></td>
        <td class='green'></td>
        <td></td>
        <td></td>
        <td class='green'></td>
        <td class='green'></td>
        <td class='green'></td>
        <td></td>
        <td></td>    
        <td></td>
        <td></td>
        <td></td>
        <td class='green'></td>
        <td class='green'></td>
    </tr>
</table>

CSS：

td{
    width:10px;
    height:10px;
    border: 1px solid black;
}
table{
    max-width:30%;
}

.green {
    background:green;
}

小提琴链接：http://jsfiddle.net/hDsts/160/

目前，如果添加另一个<td>，它只会调整所有它们的大小以适应表格设置的最大宽度。我希望它溢出到下一行。

关于如何解决这个问题或我可以实现这个目标的其他方法有什么建议吗？

【问题讨论】：

• 你需要把它放在一个新的<tr> 中，它代表table row。表格单元格不会换行。
• 附带说明，你真的不应该使用green 作为类名。如果出于某种原因您想稍后更改颜色，您将不得不更改所有类名，或者遇到非常混乱的情况。最好使用一个类名来说明绿色代表什么。编辑：另外，请验证您的代码。您缺少一个空格：<tdclass...
• TylerH - 页面将根据数据库中的内容确定的项目数自动生成。此外，在考虑页面大小调整时，我无法确保正确数量的元素使其成为自己的 .
• Conexion - 是的，我刚刚注意到，抱歉 - 我很快就把这个例子放在了一起。