如何在Blazor Hybrid模板中实现表格内滚动并移除页面横向滚动条

问题描述 #

使用默认Blazor Hybrid模板开发页面，添加表格结构与样式后，窗口宽度充足时显示正常，但缩小窗口宽度后，页面整体出现横向滚动条。需将横向滚动条限制在表格容器内部而非页面层面，已知列显示模式下已实现该效果，现调整行显示模式下的样式设置。

现有代码 #

HTML代码 #

<div class="tableAntContainer">
<table class="tableAnt">
    <thead>
        <tr>
            <th>A1</th>
            <th>A2</th>
            <th>A3</th>
            <th>A4</th>
            <th>A5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>0.5</th>
            <th>0.85</th>
            <th>0.37</th>
            <th>0.7</th>
            <th>0.7</th>
        </tr>
    </tbody>
</table>
</div>

CSS代码 #

.tableAntContainer{
border:3px solid red;
display:flex;
justify-content:center;
overflow-x:auto;
}

.tableAnt {
border: 1px solid black;
table-layout: fixed;
width: 500px;
}

.tableAnt th {
    border: 1px solid black;
    text-align:center;
    width:100px;
}

.tableAnt td {
    border: 1px solid black;
    text-align:center;
}

解决方案 #

核心问题是原容器的flex布局+justify-content:center会让容器被表格宽度撑开，超出视口导致页面滚动。只需修改以下两处CSS设置：

1. 调整表格容器样式：移除display:flex和justify-content:center，设置容器占满视口宽度，确保溢出时触发内部滚动：

.tableAntContainer{
    border:3px solid red;
    width: 100%; /* 容器占满可用宽度，不超出视口 */
    overflow-x:auto; /* 横向溢出时显示内部滚动条 */
}

2. 实现表格居中：给表格添加自动外边距，替代flex布局的居中效果：

.tableAnt {
    border: 1px solid black;
    table-layout: fixed;
    width: 500px;
    margin: 0 auto; /* 表格在容器内水平居中 */
}

修改后效果：窗口宽度充足时表格居中显示；窗口宽度小于表格固定宽度时，表格容器内部出现横向滚动条，页面不会产生滚动。

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