英文:
Rowspan in Bootstrap 5 table is not working
问题
我正在使用 Bootstrap 5 表格来展示数据（零件库存）。我有 4 种不同的零件参考，每种参考都有相同的原始参考。数据是通过 Puppeteer（网络爬取）"创建" 的。
我的表格代码如下所示：
<div class="container">
<table class="table table-responsive mt-5 caption-top">
<caption>Carreto Louco PK6<%=partDataPK[3].partName.substring(11,16)%>, <%=partDataPK[6].partName.substring(10,15)%>,
<%=partDataPK[12].partName.substring(10,15)%>, <%=partDataPK[9].partName.substring(10,15)%>
</caption>
<thead class="align-middle table-group-divider">
<tr>
<th scope="col" class="text-center"></th>
<th scope="col" class="text-center">PEÇA EM BRUTO</th>
<th scope="col" class="text-center">PEÇA BRACA</th>
<th scope="col" class="text-center">PEÇA NEGRA</th>
<th scope="col" class="text-center">PEÇA ACABADA</th>
</tr>
</thead>
<tbody class="table-group-divider">
<!-- ... 中间部分 ... -->
</tbody>
</table>
</div>
现在我的表格外观如文件 "Bootstrap5_table_without_rowspan" 中所示。
由于每种零件有相同的原始零件参考和数量，我想应用 rowspan="4"，但是当我这样做时没有任何变化。
然而，如果我应用 colspan="2"，例如，它会按预期工作。
我期望表格的外观如图像文件 "Expected_Bootstrap5_table" 中所示。
我已经查阅了关于此问题的各种问题，但没有一个解决方案有效。
有人能指向解决方案并解释为什么 rowspan 不起作用吗？谢谢。
英文:
I'm using Bootstrap 5 table to present data (stock of parts). I have 4 different references for parts, each of them having the same RAW reference. The data is "created" by Puppeteer (web scraping).
My table code is as follows:
<div class="container">
<table class="table table-responsive mt-5 caption-top">
<caption>Carreto Louco PK6ª <%=partDataPK[3].partName.substring(11,16)%>, <%=partDataPK[6].partName.substring(10,15)%>,
<%=partDataPK[12].partName.substring(10,15)%>, <%=partDataPK[9].partName.substring(10,15)%>
</caption>
<thead class="align-middle table-group-divider">
<tr>
<th scope="col" class="text-center"></th>
<th scope="col" class="text-center">PEÇA EM BRUTO</th>
<th scope="col" class="text-center">PEÇA BRACA</th>
<th scope="col" class="text-center">PEÇA NEGRA</th>
<th scope="col" class="text-center">PEÇA ACABADA</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th scope="row" class="text-center">
<%=partDataPK[3].partName.substring(3,17)%>
</th>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[0].ref %>">
<%=partDataPK[0].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[1].ref %>">
<%=partDataPK[1].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[2].ref %>">
<%=partDataPK[2].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[3].ref %>">
<%=partDataPK[3].partQty%>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row" class="text-center">
<%=partDataPK[6].partName.substring(3,17)%>
</th>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[0].ref %>">
<%=partDataPK[0].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[4].ref %>">
<%=partDataPK[4].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[5].ref %>">
<%=partDataPK[5].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[6].ref %>">
<%=partDataPK[6].partQty%>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row" class="text-center">
<%=partDataPK[12].partName.substring(3,17)%>
</th>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[0].ref %>">
<%=partDataPK[0].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[10].ref %>">
<%=partDataPK[10].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[11].ref %>">
<%=partDataPK[11].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[12].ref %>">
<%=partDataPK[12].partQty%>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="row" class="text-center">
<%=partDataPK[9].partName.substring(3,17)%>
</th>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[0].ref %>">
<%=partDataPK[0].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[7].ref %>">
<%=partDataPK[7].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[8].ref %>">
<%=partDataPK[8].partQty%>
</td>
<td class="text-center" tabindex="0" data-html="true" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="Referência: <%= partDataPK[9].ref %>">
<%=partDataPK[9].partQty%>
</td>
</tr>
</tbody>
</table>
</div>
Right now my table has the appearence shown in the file "Bootstrap5_table_without_rowspan" Bootstrap5_table_without_rowspan
Since the RAW part refence and, thus, quantity is the same for each of 4 references, i would like to apply rowspan="4", but when i do that nothing happens.
However, if i apply colspan="2", for example, it works as expected.
I am expecting to have the table with the appearence shown in the image file "Expected_Bootstrap5_table".Expected_Bootstrap5_table
I've consulted various questions about this issue here on StackOverflow by none of the solution worked.
Can someone point me to the solution and what is preventing rowspan from working?
Thanks in advance.
答案1
得分: 1
问题是每个表格行都包装在一个单独的表格主体元素中。当我移除了多余的表格主体时，它就正常工作了。
英文:
The problem was that each of table rows was wrapped in an individual table body element. When I removed extraneous table bodies, it worked.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论