强制 <div>s 在 <td> 单元格中保持一行答案

【问题标题】：Force <div>s to keep to one line in <td> cell强制 <div>s 在 <td> 单元格中保持一行
【发布时间】：2013-12-29 17:00:46
【问题描述】：

我正在尝试遍历传递到 Jinja2 模板中的一些数据并填充表格。我想将每个<td> 单元格拆分为更多子列如果有更多信息，<td> 中的子列数是动态的。

示例 1

我希望每个<td> 产生这样的结果（即，无论每个<td> 中有多少子列，新的子列都将显示在同一行中）：
@987654321 @

示例2##

在此示例中，<td> 中的每个新子列都显示在前一个子列下方（我不希望这样）：

如果我使用这个小 sn-p 代码并在浏览器中打开它，它会按我的意愿工作（示例 1）。

<html>
<head>
<style type="text/css">
.cell {
    display: block;
}
.col {
    float:left;
    /*display: inline;*/
}
</style>
</head>
<body>
<table style="border:solid">
    <thead>
        <tr><th>Example 1</th>
        <th>Example 2</th>
        <th>Example 3</th></tr>
    </thead>
    <tr>
        <td>
            <div class="cell">
                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>
                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>
                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>
            </div>
        </td>
        <td>
            <div class="cell">

                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>
            </div>
        </td>
        <td>
            <div class="cell">
                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>
                <div class='col'>
                    item 1 <br />
                    item 2 <br />
                    item 3 <br />
                </div>

            </div>
        </td>
    </tr>

</table>
</body>
</html>

但是它在模板中没有按预期工作。如果我使用相同的样式，<td> 不会扩大以适应新的子列。 <td> 确实会扩大以容纳每列中的文本。

<table>
<thead>Some information about all the cells</thead>
{% for person in list_of_people%}
<tr>

<td>
  <div class="cell">
  {% for item in person.activity %}
    <div class='col'>
    {% for element in item %}
      {{ loop.index }}
        {% if element['correct'] == True %}
          &#10004;
        {% else %}
          &#10007;
        {% endif %}
      <br />
    {% endfor %}
    SCORE <br />= {{stats[0]}} / {{stats[2]}}
    <br />
    </div> <!-- col -->
  {% endfor %}
  </div> <!-- attempt -->
</td>

</tr>
{% endfor %}
</table>

我如何确保每个<td> 中的每个<div> 保持在同一行并且不会被推到前一行以下？

【问题讨论】：

你为什么用divs来显示tabular数据？
你很可能通过display: table-cell 到CSS 来实现这一点……但话说回来，你为什么不使用表格。
我使用的是<table>，但在表格中我想根据是否有更多信息可以将<td> 分成更多的列...

标签： html css jinja2

【解决方案1】：

在外部div.attempt 中使用display: flex 将阻止内部div 进入下一行。

我像这样使用 flexbox（参见this answer）：

.attempt {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

【讨论】：

【解决方案2】：

已编辑答案。

考虑为 td 内的列使用非块元素；跨度元素有效。

看起来像这样：

table
  tr
    td
      span blammy /span
      span hooty /spam
      span kapow /span
    /td
  /tr
/table

您应该能够在 span 元素上设置宽度，以便列从一行到另一行排列。

另外，如有必要，display:inline-block 可能会有所帮助。

这是example fiddle

【讨论】：

我考虑了<table> 中的<td>.. 你觉得这是一个更好的解决方案吗？

【解决方案3】：

使用.col{float:left; width:33%;} 结果：http://jsfiddle.net/

【讨论】：

如果<td> 中只有一列怎么办？我不是很清楚，但不是每行或列中的每个<td> 都会有更多的列。
在<div class='col3 {% for element in item %}{% if loop.length == 2 %}col2{% elseif loop.length == 1%}col1{% endif %}{% endfor %} '> 中创建一个for 循环。并为每个列类使用 css：.col1{width:100%;} .col2{width:50%} .col3{width:33%}
这是一个很好的建议，但是，<td> 中可能有无限多个子列。
然后为每一列生成一个表。并将每个element 包装在td 中的table

【解决方案4】：

为什么在table 中使用div 来创建列？只需table即可达到同样的效果：

<table>
  <thead>
    <tr>
      <th colspan="3">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        item 1 <br />
        item 2 <br />
        item 3 <br />
      </td>
      <td>
        item 1 <br />
        item 2 <br />
        item 3 <br />
      </td>
      <td>
        item 1 <br />
        item 2 <br />
        item 3 <br />
      </td>
    </tr>
  </tbody>
</table>

Example

【讨论】：