如何在单个表格中适配两个<thead>并实现整齐排版

问题分析 #

当前表格存在两个核心问题导致排版混乱：

• 第一个<thead>仅包含3列，第二个<thead>有4列，列数不统一造成右侧出现空白区域
• 第二个<thead>被嵌套在<tbody>内部，不符合HTML规范，会干扰浏览器的表格渲染逻辑

解决方案 #

方案1：补全列数+修正结构

给第一个表头添加空列，让两组表头列数统一，同时把第二个表头移出<tbody>，放在对应数据行的<tbody>之前，保证HTML结构合规。

修改后的完整代码：

<div class="hidden" id="part-req-section">
    <form method="post" name="partForm" id="partForm"> 
        {% csrf_token %}
        <div class="row">
            <div class="container">
                <div class="row">
                    <div class="container">
                        <div class="table-responsive">
                            <h3>Part Request</h3>
                            <table class="table table-bordered table-hover table-responsive">
                                <!-- 第一组表头：零件请求 -->
                                <thead>
                                    <tr>
                                        <th scope="col">Part name*</th>
                                        <th scope="col">Quantity*</th>
                                        <th scope="col">Reason*</th>
                                        <th scope="col"></th> <!-- 补全空列，对齐第二组表头列数 -->
                                    </tr>
                                </thead>
                                <tbody>
                                    {{ part_request_formset.management_form }} 
                                    {% for some_form in part_request_formset %}
                                    <tr id="part-req-form">
                                        <td>{{ some_form.part|as_crispy_field }}</td>
                                        <td>{{ some_form.quantity|as_crispy_field }}</td>
                                        <td>{{ some_form.reason|as_crispy_field }}</td>
                                        <td></td> <!-- 对应空表头的单元格 -->
                                    </tr>
                                    {% endfor %}
                                </tbody>

                                <!-- 第二组表头：位置信息 -->
                                <thead>
                                    <tr>
                                        <th scope="col">Aisle*</th>
                                        <th scope="col">Column*</th>
                                        <th scope="col">Shelf*</th>
                                        <th scope="col">Bin*</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>{{ location.aisle|as_crispy_field }}</td>
                                        <td>{{ location.column|as_crispy_field }}</td>
                                        <td>{{ location.shelf|as_crispy_field }}</td>
                                        <td>{{ location.bin|as_crispy_field }}</td>
                                    </tr> 
                                </tbody>

                                <!-- 新增空表单行 -->
                                <tbody>
                                    <tr id="empty-part-req-form" class="hidden">
                                        <td>{{ part_request_formset.empty_form.part|as_crispy_field }}</td>
                                        <td>{{ part_request_formset.empty_form.quantity|as_crispy_field }}</td>
                                        <td>{{ part_request_formset.empty_form.reason|as_crispy_field }}</td>
                                        <td></td> <!-- 补全空列 -->
                                        <td>{{ location.aisle|as_crispy_field }}</td>
                                        <td>{{ location.column|as_crispy_field }}</td>
                                        <td>{{ location.shelf|as_crispy_field }}</td>
                                        <td>{{ location.bin|as_crispy_field }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>    
                        <div class="input-group-append float-end">
                            <a href="" id="add-empty-part-form"><i class="fas fa-plus-circle text-success"></i></a>
                        </div>
                    </div>
                </div>                        
            </div>
        </div>
    </form>
</div>

方案2：合并表头（可选优化）

如果空列影响视觉效果，可以让第一个表头的最后一列跨列，凑够4列总数，避免空列的同时保证列数统一：

<thead>
    <tr>
        <th scope="col">Part name*</th>
        <th scope="col">Quantity*</th>
        <th scope="col" colspan="2">Reason*</th> <!-- 跨2列，与第二组表头列数对齐 -->
    </tr>
</thead>

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