HTML表格布局问题：最后一行未独立显示，与跨行跨列行并行

问题根源 #

1. rowspan计算错误：第一列设置的rowspan="8"不符合实际需要覆盖的行数，导致表格布局错位。实际该单元格只需覆盖前6行（初始行+5个问题行+1个隐藏提示行）。
2. 多余的rowspan设置：隐藏提示行的rowspan="3"完全多余，它不需要跨3行，因为最后一行是独立的表格行，和前面的区块无关，这个设置直接打乱了表格的结构逻辑。

修正后的代码 #

<table class="table discovery mb-0 ">
    <thead>
        <tr>
            <th class="w-25">Discovery URL</th>
            <th>Issue type</th>
            <th>Plugin Id</th>
            <th>Severity</th>
        </tr>
    </thead>
    <tbody>
        <tr class="discoveryurl">
            <td class="text-start br-b0" rowspan="6">
                opc.tcp://echo:53530/OPCUA/SimulationServer
            </td>
            <td class="text-start">
                Anonymous authentication enabled
            </td>
            <td><a href="#" target="_blank">10001</a></td>
            <td>
                <div class="row">
                    <div class="col pe-0 text-start">High (7,3)</div>
                    <div class="col">
                        <div class="results high">
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="text-start">Message Security Mode None</td>
            <td><a href="#" target="_blank">10006</a></td>
            <td>
                <div class="row">
                    <div class="col pe-0 text-start">Medium (6,5)</div>
                    <div class="col">
                        <div class="results medium">
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="text-start">Security Policy None</td>
            <td><a href="#" target="_blank">10009</a></td>
            <td>
                <div class="row">
                    <div class="col pe-0 text-start">Medium (5,4)</div>
                    <div class="col">
                        <div class="results medium">
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="text-start">Self-signed client application certificates trusted</td>
            <td><a href="#" target="_blank">10010</a></td>
            <td>
                <div class="row">
                    <div class="col pe-0 text-start">Medium (5,4)</div>
                    <div class="col">
                        <div class="results medium">
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="text-start">Auditing disabled</td>
            <td><a href="#" target="_blank">10002</a></td>
            <td>
                <div class="row">
                    <div class="col pe-0 text-start">Medium (5)</div>
                    <div class="col">
                        <div class="results medium">
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span class="active"></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td class="text-start subs" colspan="3">Hiding 3 random issues.
                <a href="#">subscribe</a> to view all.
            </td>
        </tr>
        <tr class="last-row">
            <td class="text-start br-rb">
                opc
            </td>
            <td class="text-start" colspan="3">
                <ul class="error">
                    <li>
                        Https 
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

说明 #

• 将第一列的rowspan从8改为6，匹配实际需要覆盖的行数，确保和右侧的6行内容对齐。
• 移除隐藏提示行的rowspan="3"，仅保留colspan="3"，让它只占据当前行的3列空间。
• 最后一行保持独立结构，第一列单独占1列，第二列colspan="3"，完全符合预期布局。

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