我想在同一个表中使用两个不同的<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表,但我认为它不会像我的表单集那样工作。
1条答案
按热度按时间whlutmcx1#
如果有一种方法可以扩展第一个标题,这样它的右边就没有空格了,那就太好了。
You can use the
colspan
attribute.一米一米一x一米二米一x