如何让HTML报表模板左侧标题仅按需重复显示？

要实现条目多时自动重复左侧标题的新行，核心是调整模板的循环逻辑，让每个条目对应一套完整的标题组，而非把所有标题集中放置。以下是具体实现步骤：

1. 修正原有代码语法错误 #

你现有代码里的 <dl < class="float-left"> 存在语法错误，应改为 <dl class="float-left">。

2. 根据条目数量切换布局 #

如果需要保留1-2个条目时的原有布局，同时在条目超过2个时自动每行重复标题，可通过模板条件判断+循环实现：

<section class="keep-together">
  <h5 class="uptick-title no-page-break-after">Results</h5>
  <p>The system results as follows.</p>
  {% if all_servicetasks %}
    {% if all_servicetasks|length <= 2 %}
      <!-- 条目少的场景：沿用原有布局 -->
      <div class="clearfix">
        <dl class="float-left">
          <dt>Asset</dt>
          <dt>These results indicate:</dt>
          <dt>Location:</dt>
          <dt>Fitting:</dt>
        </dl>
        <div class="float-left">
          {% for task in all_servicetasks %}
            <dl>
              <dd>{{ task.asset }}</dd>
              <dd>{{ task.result_indication }}</dd>
              <dd>{{ task.location }}</dd>
              <dd>{{ task.fitting }}</dd>
              {% if not loop.last %}
                <hr> <!-- 条目间添加分隔线 -->
              {% endif %}
            </dl>
          {% endfor %}
        </div>
      </div>
    {% else %}
      <!-- 条目多的场景：每行重复标题 -->
      {% for task in all_servicetasks %}
        <div class="service-task-row clearfix">
          <dl class="float-left">
            <dt>Asset</dt>
            <dt>These results indicate:</dt>
            <dt>Location:</dt>
            <dt>Fitting:</dt>
          </dl>
          <dl class="float-left">
            <dd>{{ task.asset }}</dd>
            <dd>{{ task.result_indication }}</dd>
            <dd>{{ task.location }}</dd>
            <dd>{{ task.fitting }}</dd>
          </dl>
        </div>
      {% endfor %}
    {% endif %}
  {% endif %}
</section>

3. 配套CSS调整布局样式 #

添加以下CSS保证标题与内容对齐，行布局正常：

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 左浮动通用样式 */
.float-left {
  float: left;
  margin-right: 2em;
}

/* 条目行间距 */
.service-task-row {
  margin-bottom: 1.2em;
}

/* 标题样式：和内容行高对齐 */
dl.float-left dt {
  margin: 0.6em 0;
  font-weight: bold;
}

/* 内容样式：去掉默认缩进，和标题行高对齐 */
dl.float-left dd {
  margin: 0.6em 0;
  margin-left: 0;
}

原理说明 #

原有代码的问题是把所有标题集中在一个 <dl> 里，内容堆在右侧无法与多个条目一一对应。通过循环每个服务任务条目，为每个条目单独渲染一套标题组和内容，就能实现条目增多时自动生成带左侧标题的新行。若无需保留少条目时的布局，直接使用 else 块里的循环逻辑即可。

内容的提问来源于stack exchange，提问作者HTML Newbie