如何将Django上下文变量的字典项循环渲染为HTML表格独立行

问题原因 #

• 你在<tbody>标签内多写了一层冗余的<tr>包裹循环逻辑，导致所有循环生成的行都被嵌套到了同一个父行内，结构完全错乱
• HTML表格的行标签<tr>内部必须嵌套单元格标签<td>才能正常展示内容，你直接把字典键扔到<tr>里不符合语法规范

修正后代码 #

<table class="u-half-width">
  <thead>
    <tr>
      <th>Column</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    {% for key,value in top_items.items %}
    <tr>
      <td>{{ key }}</td>
      <td>{{ value }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

如果不需要展示value、只需要展示key的话，调整单元格内容和表头即可。

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