Bootstrap 5表格rowspan属性不生效问题求助

问题背景 #

我用Bootstrap 5展示零件库存数据，4种零件共享同一个RAW零件引用，数据由Puppeteer抓取生成。尝试通过rowspan="4"合并RAW零件对应的单元格，但设置后完全无效果，colspan属性却能正常生效。

当前代码 #

<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>

问题原因 #

每一行都被放在独立的<tbody>标签里，HTML规范中rowspan属性仅能在同一个<tbody>内部的行之间生效，跨<tbody>的单元格合并不被支持。这就是rowspan="4"失效，而colspan（同一行内列合并）不受<tbody>限制可正常工作的原因。

解决方案 #

将所有行合并到同一个<tbody>中，给第一行的RAW零件单元格添加rowspan="4"，同时删除后面三行对应的RAW零件单元格：

修改后的代码 #

<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>
                <!-- 添加rowspan="4"合并4行 -->
                <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 %>" rowspan="4">
                    <%=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>
            <tr>
                <th scope="row" class="text-center">
                    <%=partDataPK[6].partName.substring(3,17)%>
                </th>
                <!-- 移除重复的PEÇA EM BRUTO单元格 -->
                <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>
            <tr>
                <th scope="row" class="text-center">
                    <%=partDataPK[12].partName.substring(3,17)%>
                </th>
                <!-- 移除重复的PEÇA EM BRUTO单元格 -->
                <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>
            <tr>
                <th scope="row" class="text-center">
                    <%=partDataPK[9].partName.substring(3,17)%>
                </th>
                <!-- 移除重复的PEÇA EM BRUTO单元格 -->
                <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>

说明 #

1. 将所有<tr>放入同一个<tbody>内，确保rowspan跨行生效；
2. 在第一行的PEÇA EM BRUTO单元格添加rowspan="4"，使其覆盖4行高度；
3. 删除后面三行中对应的PEÇA EM BRUTO单元格，避免表格结构错乱；
4. 保留table-group-divider类，确保行之间的分隔线正常显示。

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