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

Question

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

示例:表格宽度设置为 30%(为了论证，假设为 100 像素)，td 的宽度为 10 像素。输入 11 个 td 后，第 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;
}

fiddle 链接:http://jsfiddle.net/hDsts/160/

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

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

Answer 1

我认为仅使用 css 和 html 是不可能做到的，我更喜欢你使用 display: flex 来实现你的目标。

HTML:

<div class="holder">
  <div class="item"> 1 </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"> Last element </div>
</div>

CSS:

.holder {
  max-width: 30%;
  background-color: #ccc;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  font-size: 12px;
}
.item {
  width: 100px;
  border: 1px solid #000;
  height: 20px;
  flex: 80px 1;
  text-align: center;
  color: #000;
}

因此元素的最小宽度为 80px。

这是工作示例: http://codepen.io/GomatoX/pen/Ceonj