Html 强制s在单元格中保持一行_Html_Css_Jinja2

Html 强制s在单元格中保持一行

html css

Html 强制s在单元格中保持一行,html,css,jinja2,Html,Css,Jinja2,我试图循环遍历传递到Jinja2模板中的一些数据，并填充一个表。我想将每个单元格拆分为更多的子列。如果有更多信息，则单元格中的子列数是动态的例1 我希望每个子列的结果都是这样的，即无论每个子列中有多少子列，新的子列都将显示在同一行中：例2 在本例中，中的每个新子列都显示在前一个子列的下方，我不希望这样：如果我将这段代码片段在浏览器中打开，它将按照我希望的方式工作，如示例1所示 <html> <head> <style type="text/css">

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

例1 我希望每个子列的结果都是这样的，即无论每个子列中有多少子列，新的子列都将显示在同一行中：

例2 在本例中，中的每个新子列都显示在前一个子列的下方，我不希望这样：

如果我将这段代码片段在浏览器中打开，它将按照我希望的方式工作，如示例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>

但是，它在模板中无法按预期工作。如果使用相同的样式，则不会加宽以容纳新的子列。加宽不适应每列中的文本

<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>

如何确保每个内部分区保持在同一行中，并且不会被推到上一行的下方？

在外部分区中使用display:flex。尝试将阻止内部分区进入下一行

我使用了flexbox，如下所示：

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

我使用了flexbox，如下所示：

编辑答案

考虑对td内的柱使用非块元素；跨度元素起作用

这看起来像这样：

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

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

此外，如有必要，display:inline块可能会有所帮助

这是一个经过编辑的答案

考虑对td内的柱使用非块元素；跨度元素起作用

这看起来像这样：

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

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

此外，如有必要，display:inline块可能会有所帮助

下面是一个

use.col{float:left；width:33%；}结果：

为什么在表中使用div来创建列？您可以仅使用一个表来实现相同的效果：

为什么要在表中使用div来创建列？您可以仅使用一个表来实现相同的效果：

为什么要使用DIV来显示表格数据？很可能通过显示：表格单元格通过CSS。。。但是，再说一遍，为什么不使用表。我使用的是a，但在表中，我想根据是否有更多信息放在其中，将向上划分为更多的列…为什么要使用div显示表格数据？很可能可以通过display实现这一点：通过CSS显示表格单元格。。。但是，再说一遍，为什么不使用表呢？我使用的是a，但是在表中，我想根据是否有更多的信息放在其中，将up划分为更多的列……如果其中只有一列呢？我不是很清楚，但不是每一行或每一列中都会有更多的列。在中创建一个for循环。并对每个列类使用css：.col1{width:100%；}.col2{width:50%}.col3{width:33%}这是一个很好的建议，但是，在中可能有无限多的子列。然后为每个列生成一个表。并将每个元素包装在该表的td中，如果其中只有一列呢？我不是很清楚，但不是每一行或每一列中都会有更多的列。在中创建一个for循环。并对每个列类使用css：.col1{width:100%；}.col2{width:50%}.col3{width:33%}这是一个很好的建议，但是，在中可能有无限多的子列。然后为每个列生成一个表。并将每个元素包装在表中的td中，我认为。。你觉得这是一个更好的解决方案吗？我考虑了。。你觉得这是一个更好的解决方案吗？

<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>