如何固定表格显示区域，使横竖滚动条始终可见？

1. 修复嵌套滚动容器问题 #

当前问题核心是双层table-responsive容器嵌套：页面模板外层加了滚动容器，django-tables2的自定义模板里又套了一个，导致横向滚动条被限制在内部表格容器底部，必须滚动到表格最下方才能看到。先修改django-tables2的自定义模板，移除内部的table-responsive类：

{% extends 'django_tables2/bootstrap5.html' %}

{% block table-wrapper %}
<div class="table-container">
    {% block table %}
        {{ block.super }}
    {% endblock table %}

    {% block pagination %}
        {{ block.super }}
    {% endblock pagination %}
</div>
{% endblock table-wrapper %}

2. 调整外层滚动容器样式 #

给页面模板的外层容器设置自适应高度和强制滚动规则，让滚动条始终显示在可视区域内：

{% load render_table from django_tables2 %}

{% block content %}
    <!-- 150px可根据页面头部、左侧菜单的实际高度调整，确保表格区域适配剩余屏幕空间 -->
    <div class="table-responsive" style="max-height: calc(100vh - 150px); overflow: auto;">
        {% render_table student_change_table %}
    </div>
{% endblock content %}

3. 确保表格触发横向滚动 #

添加自定义CSS，防止表格被容器压缩，保证横向内容足够触发滚动：

/* 根据列数调整最小宽度，确保表格宽于容器时触发横向滚动 */
.table-container table {
    min-width: 1200px;
    table-layout: fixed; /* 可选，固定列宽避免内容拉伸导致列宽混乱 */
}

/* 禁止单元格内容换行，保持列宽稳定 */
.table-container th, .table-container td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 内容过长时显示省略号，可选优化 */
}

原理说明 #

• 移除嵌套的table-responsive后，外层容器直接包裹表格，横纵滚动条都会绑定在这个外层容器上，始终出现在可视区域的底部和右侧。
• max-height: calc(100vh - 150px)让表格区域自动适配屏幕剩余空间，不会超出视口范围。
• 设置表格min-width确保横向内容不会被压缩，触发外层容器的横向滚动条，而非让表格自适应容器宽度。

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