Table布局查询

Question

我有一张显示食谱信息的卡片

在这张卡片中，我有一个 table 和下面的 html。 table 有 2 列，一个部分名称和成分数量。有 1 节到许多成分

<table class='table table-hover text-sm'>
  <thead>
    <tr>
      <th>Section</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tr>
    <td>Section name 1</td>
    <td>Amount Pretty 1</td>
  </tr>
  <tr>
    <td>Section name 1</td>
    <td>Amount Pretty 2</td>
  </tr>
  <tr>
    <td>Section name 2</td>
    <td>Amount Pretty 3</td>
  </tr>
</table>

服务器代码是

{% for res in results2 %}
  <tr>
    <td>{{res["SectionName"]}}</td> 
    <td>{{res["AmountPretty"]}}</td>
  </tr>
{% endfor %}

我要做的是不重复部分名称，即。按照下面的样式按部分对 AmountPretty 进行分组。

Section 1
    ...amount pretty
    ...amount pretty
Section 2
    ...amount pretty
    ...

是否可以使用 tables 来做到这一点？或者是否有更好的 html 构造来获得此布局？

在代码片段中，我需要删除第二个部分名称 1

Answer 1

在我看来，您实际上更喜欢使用的是嵌套列表，如下例所示：

<ul>
  <li>Section 1</li>
  <ul>
    <li>...amount pretty</li>
    <li>...amount pretty</li>
  </ul>
  <li>Section 2</li>
  <ul>
    <li>...amount pretty</li>
    <li>...amount pretty</li>
  </ul>
</ul>

导致：

Table布局查询

Table layout query

html

flask