django 在一个表格中放置两个表格标题,并设置其格式以使其看起来整洁

ukdjmx9f  于 2023-01-10  发布在  Go
关注(0)|答案(1)|浏览(115)

我想在同一个表中使用两个不同的<thead>,但我希望它们堆叠得很好。现在的情况是,第一个标题比第二个标题少了1列,所以看起来很时髦。如果有办法扩展第一个标题,使其右侧没有空格,那就太好了。或者你知道一个更好的方法来解决这个问题。这是这个表现在的样子。

,这是我用来得到这个结果的代码

<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><br>
                                            </tr>
                                        </thead>
                                        <tbody id="part-req-form-list">
                                            {{ part_request_formset.management_form }} 
                                            {% for some_form in part_request_formset %}
                                            <tr id="part-req-form" class="">
                                                <td>{{ some_form.part|as_crispy_field }}</td>
                                                <td>{{ some_form.quantity|as_crispy_field }}</td>
                                                <td>{{ some_form.reason|as_crispy_field }}</td>
                                            <tr>
                                            {% endfor %}
                                            <thead>
                                                <tr>
                                                    <th scope="col">Aisle*</th>
                                                    <th scope="col">Column*</th>
                                                    <th scope="col">Shelf*</th>
                                                    <th scope="col">Bin*</th>
                                                </tr>

                                            </thead>
                                            <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> 
                                            <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>{{ 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表,但我认为它不会像我的表单集那样工作。

whlutmcx

whlutmcx1#

如果有一种方法可以扩展第一个标题,这样它的右边就没有空格了,那就太好了。
You can use the colspan attribute.
一米一米一x一米二米一x

相关问题