如何在不重复标题的情况下创建表格？

Posted 2023-01-16

我正在处理一个页面，如果成员符合某个标准，则会在表格中输出成员的信息。我遇到的问题是，如果有多个符合条件的成员，表头会不断重复。

这是代码

<div class="card">
      <div class="card-header bg-transparent">
         <h4>Members who list  instrument.name  as their primary instrument:</h4>
      </div>

      <div class="card-body">
         % if not primary_users %
           <h5>There are currently no members who list  instrument.name  as their primary instrument.</h5>

                    % else %

                        <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>HCMN Rating</th>
                                    <th>Email</th>
                                    <th>Location</th>
                                </tr>
                            </thead>
                            % for member in primary_users %
                            <tbody>
                                <tr>
                                    <td><a href="% url 'users:individual_member' member.id %"> member.first_name   member.last_name </a></td>
                                    <td> member.rating </td>
                                    <td> member.email </td>
                                    <td> member.area </td>
                                </tr>
                            </tbody>
                        </table>
                        </div>
                        % endfor %
                    % endif %
                </div>
            </div>

这是我正在谈论的问题的截图：

答案

你需要将<tbody>标签放在for循环之外。同样适用于</tbody>，</table>和</div>。

你想在循环中只有<tr>...</tr>部分：

                        <tbody>

                          % for member in primary_users %
                            <tr>
                                <td><a href="% url 'users:individual_member' member.id %"> member.first_name   member.last_name </a></td>
                                <td> member.rating </td>
                                <td> member.email </td>
                                <td> member.area </td>
                            </tr>
                          % endfor %

                        </tbody>
                    </table>
                    </div>

通常，在执行循环和条件时，请注意html标记，这样您就不会得到不匹配的标记。