Angular项目：如何让Flex布局Footer与带overflow-x的Table同宽？

我在Angular项目中使用HTML和SCSS开发多列表格，为展示全部内容给父容器设置了overflow-x: scroll实现横向滚动，但表格下方的Footer无法拉伸至表格的实际宽度，问题效果如下：

现有代码 #

HTML代码 #

<body>
    <section class="test-table">
        <table class="test-table__content">
            <thead>
                <tr>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                    <th scope="col">Test</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                </tr>
            </tbody>
        </table>

        <footer>HERE IS MY PROBLEM - THIS FOOTER MUST HAVE THE SAME WIDTH OF THE TABLE</footer> 
    </section>
</body>

SCSS代码 #

.test-table {
    overflow-x: scroll;

    &__content {
        width: 100%;

        & thead th {
            background-color: #FFFFFFB3;
            font-size: 1.1rem;
            color: #39CDDB;
        }

        & tbody {
            & td {
                text-align: center;
                min-width: 6rem;
            }

            & tr:nth-child(even) {
                background-color: #FFFFFFB3;
            }

            & tr:nth-child(odd) {
                background-color: #4D4F5333;

                td {
                    border-right: 1px solid gray;
                }
            }
        }
    }

    footer {
        display: flex;
        flex: 1;
        flex-grow: 1;
        flex-shrink: 1;
        background-color: red;
        color: yellow;
    }
}

解决方案 #

问题根源是test-table容器宽度由父元素决定，而非内部表格的实际宽度，导致footer仅跟随容器宽度，无法匹配表格真实宽度。以下两种方法可解决该问题：

方法1：用display: table让容器适配表格宽度 #

调整HTML结构，给表格和footer套内层容器，让容器宽度由表格撑开，将滚动逻辑移到外层：

修改后的HTML

<body>
    <section class="test-table">
        <div class="test-table__wrapper">
            <table class="test-table__content">
                <!-- 表格内容保持不变 -->
            </table>
            <footer>THIS FOOTER NOW MATCHES TABLE WIDTH</footer> 
        </div>
    </section>
</body>

修改后的SCSS

.test-table {
    overflow-x: scroll;

    &__wrapper {
        display: table; /* 容器宽度匹配内部表格 */
        min-width: 100%; /* 窄屏幕下容器至少占满宽度 */
    }

    &__content {
        width: 100%;

        & thead th {
            background-color: #FFFFFFB3;
            font-size: 1.1rem;
            color: #39CDDB;
        }

        & tbody {
            & td {
                text-align: center;
                min-width: 6rem;
            }

            & tr:nth-child(even) {
                background-color: #FFFFFFB3;
            }

            & tr:nth-child(odd) {
                background-color: #4D4F5333;

                td {
                    border-right: 1px solid gray;
                }
            }
        }
    }

    footer {
        display: table-caption; /* footer作为表格标题，自动匹配表格宽度 */
        caption-side: bottom; /* 将标题放在表格下方 */
        background-color: red;
        color: yellow;
        padding: 0.5rem;
    }
}

方法2：用Grid布局同步宽度 #

利用CSS Grid特性，让表格和footer共享同一列宽度，无需修改HTML结构：

修改后的SCSS

.test-table {
    display: grid;
    grid-template-columns: minmax(100%, auto); /* 列宽由内容撑开，至少占满容器 */
    overflow-x: scroll;

    &__content {
        width: 100%;

        & thead th {
            background-color: #FFFFFFB3;
            font-size: 1.1rem;
            color: #39CDDB;
        }

        & tbody {
            & td {
                text-align: center;
                min-width: 6rem;
            }

            & tr:nth-child(even) {
                background-color: #FFFFFFB3;
            }

            & tr:nth-child(odd) {
                background-color: #4D4F5333;

                td {
                    border-right: 1px solid gray;
                }
            }
        }
    }

    footer {
        grid-column: 1 / -1; /* 占满整列 */
        background-color: red;
        color: yellow;
        padding: 0.5rem;
    }
}

两种方法都能让footer自动匹配表格实际宽度，滚动时footer会与表格同步横向滚动。

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