如何让HTML表格适配Flex布局的页面主体容器？

问题原因 #

当前布局里，flex容器默认不会自适应过宽内容，同时表格在窄容器内无法横向扩展，最终导致溢出页面边界。

具体修复步骤 #

1. 让页面主体支持横向滚动 #

修改body和container-page的CSS，允许页面容纳宽内容：

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    width: auto; /* 替换原width:100%，让body随内容自适应宽度 */
    border: 5px solid rgb(153, 153, 153);
    overflow-x: auto; /* 内容过宽时显示横向滚动条 */
}

.container-page{
    background-color: rgb(233, 24, 24);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* 防止侧边栏与内容区换行 */
    min-width: fit-content; /* 容器宽度至少适配内部内容 */
}

2. 优化表格容器的滚动体验（可选） #

如果不想整个页面滚动，仅让表格在内容区内滚动，给表格容器添加溢出处理：

.item-content-body {
    background-color: rgb(251, 251, 251);
    flex-grow: 2;
    margin: 0;
    padding: 30px;
    color: #000;
    overflow-x: auto; /* 表格过宽时，仅内容区显示滚动条 */
}

3. 适配头部和页脚宽度 #

让头部、页脚跟随页面内容宽度自适应：

.container-header, .container-footer {
    min-width: fit-content; /* 确保头部/页脚宽度足够容纳内容 */
    width: 100%;
}

4. 修复语义化HTML问题 #

表格不应该嵌套在<h1>标签中，修改为<div>：

<!-- 原代码 -->
<h1 class = "item item-content item-content-body">
    <table id = "listviewTable">...</table>
</h1>

<!-- 修改后 -->
<div class = "item item-content item-content-body">
    <table id = "listviewTable">...</table>
</div>

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