Bootstrap嵌套表格列对齐问题求助：布局未达预期

我想要实现Bootstrap嵌套表格布局（目标布局：目标布局效果），但当前代码渲染后列无法对齐（实际效果：实际渲染效果）。以下是我用Bootstrap响应式布局写的代码：

<head>
<meta charset="utf-8" />
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
<style>
    .table-wrapper {
        overflow-x: auto;
    }
    .col-width-1 {
        flex: 0 0 6.1rem;
    }
</style>
</head>
<body>
<div class="table-wrapper">
    <table class="table table-responsive">
        <thead>
            <tr>
                <th scope="col" class="col-3">Excluded candidate</th>
                <th scope="col" class="col-1">Votes to <br>transfer</th>
                <th scope="col" class="col-3">Remaining candidates</th>
                <th scope="col" class="col col-width-1">First pref<br> total</th>
                <th scope="col" class="col col-width-1">Transfer <br>votes</th>
                <th scope="col" class="col col-width-1">Transfer % total</th>
                <th scope="col" class="col col-width-1">Excl 1<br> total</th>
                <th scope="col" class="col col-width-1">Overall % total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="col-3">
                    Clark, Philippa
                    FUSION-Planet Rescue-Whistleblower-Protection-Innovation
                </td>
                <td class="col-1">370</td>
                <td class="col-8">
                    <table class="table">
                        <tbody>
                            <tr>
                                <td class="col">
                                    Gambian, Chris
                                    FUSION: Science, Pirate, Secular, Climate Emergency
                                </td>
                                <td class="col col-width-1">1,460</td>
                                <td class="col col-width-1">90</td>
                                <td class="col col-width-1">24.32%</td>
                                <td class="col col-width-1 ">1,550</td>
                                <td class="col col-width-1 ">56.36%</td>
                            </tr>
                            <tr class="align-items-center">
                                <td class="col-3 ">
                                    Gambian, Chris
                                    FUSION: Science, Pirate, Secular, Climate Emergency
                                </td>
                                <td class="col col-width-1">1,460</td>
                                <td class="col col-width-1">90</td>
                                <td class="col col-width-1">24.32%</td>
                                <td class="col col-width-1 ">1,550</td>
                                <td class="col col-width-1 ">56.36%</td>
                            </tr>
                            <tr>
                                <td class="col-3 ">
                                    Gambian, Chris
                                    FUSION: Science, Pirate, Secular, Climate Emergency
                                </td>
                                <td class="col col-width-1">1,460</td>
                                <td class="col col-width-1">90</td>
                                <td class="col col-width-1">24.32%</td>
                                <td class="col col-width-1 ">1,550</td>
                                <td class="col col-width-1 ">56.36%</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>

核心问题是嵌套表格与外层表格的列宽未匹配，且错误使用栅格类控制表格列宽，以下是修正方案：

关键修改点 #

• 移除外层表格的col-*栅格类，改用自定义宽度类统一控制列宽，避免栅格系统与表格布局冲突
• 外层表格第三列使用colspan="6"，让嵌套表格占据从"Remaining candidates"到最后一列的全部位置，实现列对齐
• 给所有需要对齐的数值列统一设置固定宽度，确保表头与嵌套表格列宽一致
• 移除嵌套表格默认的margin、border样式，避免与外层表格视觉冲突

修正后的完整代码 #

<head>
<meta charset="utf-8" />
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
<style>
    .table-wrapper {
        overflow-x: auto;
    }
    /* 统一控制列宽 */
    .col-candidate {
        width: 25%;
    }
    .col-votes-transfer {
        width: 10%;
    }
    .col-nested-candidate {
        width: calc(25% / 6 * 3);
    }
    .col-fixed {
        width: 6.1rem;
    }
    /* 优化嵌套表格样式 */
    .nested-table {
        margin: 0;
        border: none;
        width: 100%;
    }
    .nested-table td {
        border-top: none;
        padding: 0.5rem;
    }
</style>
</head>
<body>
<div class="table-wrapper">
    <table class="table">
        <thead>
            <tr>
                <th class="col-candidate">Excluded candidate</th>
                <th class="col-votes-transfer">Votes to <br>transfer</th>
                <th class="col-nested-candidate">Remaining candidates</th>
                <th class="col-fixed">First pref<br> total</th>
                <th class="col-fixed">Transfer <br>votes</th>
                <th class="col-fixed">Transfer % total</th>
                <th class="col-fixed">Excl 1<br> total</th>
                <th class="col-fixed">Overall % total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="col-candidate">
                    Clark, Philippa
                    FUSION-Planet Rescue-Whistleblower-Protection-Innovation
                </td>
                <td class="col-votes-transfer">370</td>
                <td colspan="6">
                    <table class="table nested-table">
                        <tbody>
                            <tr>
                                <td class="col-nested-candidate">
                                    Gambian, Chris
                                    FUSION: Science, Pirate, Secular, Climate Emergency
                                </td>
                                <td class="col-fixed">1,460</td>
                                <td class="col-fixed">90</td>
                                <td class="col-fixed">24.32%</td>
                                <td class="col-fixed">1,550</td>
                                <td class="col-fixed">56.36%</td>
                            </tr>
                            <tr>
                                <td class="col-nested-candidate">
                                    Gambian, Chris
                                    FUSION: Science, Pirate, Secular, Climate Emergency
                                </td>
                                <td class="col-fixed">1,460</td>
                                <td class="col-fixed">90</td>
                                <td class="col-fixed">24.32%</td>
                                <td class="col-fixed">1,550</td>
                                <td class="col-fixed">56.36%</td>
                            </tr>
                            <tr>
                                <td class="col-nested-candidate">
                                    Gambian, Chris
                                    FUSION: Science, Pirate, Secular, Climate Emergency
                                </td>
                                <td class="col-fixed">1,460</td>
                                <td class="col-fixed">90</td>
                                <td class="col-fixed">24.32%</td>
                                <td class="col-fixed">1,550</td>
                                <td class="col-fixed">56.36%</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>

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