Django模板渲染HTML表格异常：列值错误显示为行

你的模板逻辑完全搞反了——现在是把每一列的所有数据渲染成了单独一行，而不是把每一行的多列数据组合起来，这才导致了表格显示混乱。

为什么原模板会出错？ #

原代码里的{% for i,j in d.items %}是遍历字典的每个键值对，每个键对应一整列的数据（比如name对应['damon','stefan','elena']），然后你把这一列的所有元素放在一行里。这就导致：

• 表头是4列（name/age/address/supernatural）
• 但每个数据行只有3个单元格（因为每个列的列表长度是3）
• 最后supernatural列的三个yes被单独渲染成一行，填在前三列的位置，完全不符合表格的预期结构。

解决方案：两种可选方式 #

方案1：在视图层转换数据结构（推荐）

把当前列优先的字典转换为行优先的列表，每个元素是一行数据的字典，这样模板逻辑会非常清晰。

在你的Django视图里添加这段处理代码：

# 原字典
d = {
    'name': ['damon','stefan','elena'],
    'age': [200,200,25],
    'address': ['mystic falls','mystic falls','mystic falls'],
    'supernatural': ['yes','yes','yes']
}

# 转换为行列表：每个元素是一行的完整数据
rows = []
row_count = len(d['name'])  # 假设所有列的长度一致
for i in range(row_count):
    row = {key: d[key][i] for key in d}
    rows.append(row)

# 把原字典d和新的rows都传给模板
context = {'d': d, 'rows': rows}
return render(request, 'your_template.html', context)

然后修改模板代码：

<table class="table table-striped" border="1" class="dataframe">
  <thead>
    <tr style="text-align: center;">
      {% for key in d %}
        <th>{{ key }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for row in rows %}
      <tr style="text-align: center;">
        {% for key in d %}
          <td>{{ row.key }}</td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>

方案2：自定义模板过滤器（无需修改视图）

如果不想改动视图，可以自定义一个模板过滤器来获取列表指定索引的元素，然后在模板里按行索引循环。

1. 在你的Django app下创建templatetags/custom_filters.py文件，内容如下：

from django import template

register = template.Library()

@register.filter
def get_item(list_data, index):
    """获取列表指定索引的元素"""
    return list_data[index]

2. 修改模板代码，先加载过滤器，再按行索引循环：

{% load custom_filters %}

<table class="table table-striped" border="1" class="dataframe">
  <thead>
    <tr style="text-align: center;">
      {% for key in d %}
        <th>{{ key }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for _ in d.name %}
      <tr style="text-align: center;">
        {% for key in d %}
          <!-- 用父循环的索引获取当前行对应列的值 -->
          <td>{{ d.key|get_item:forloop.parentloop.counter0 }}</td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>

两种方案都能实现正确的表格渲染，最终会显示为：

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