Question

我正在尝试设计一个表格，该表格将以某种图形形式显示从数据库中提取的数据。当集合'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>，它只会调整所有这些值以适应表格设置的最大宽度。我希望它溢出到下一行。

有关如何解决此问题或其他方法的任何建议我可以实现此目标吗？

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

Answer 2

您可以将TD设置为display: inline-block;但是您还需要指定表格的宽度以符合，否则它将是窗口宽度的30％。例如。将它包装在具有指定宽度的div中。

http://jsfiddle.net/hDsts/160/

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

2 个答案: