在Django中实现带滚动条的Pandas DataFrame HTML表格展示

要解决大数据量表格的滚动问题，只需把表格包裹在容器div中，通过CSS设置容器的固定宽高和滚动属性，同时优化表格样式避免内容错乱。以下是具体实现方案：

基础滚动实现（整体滚动） #

直接给容器设置固定尺寸，开启自动滚动，同时调整表格布局确保显示正常：

<!-- 包裹表格的容器，设置固定尺寸和滚动 -->
<div style="width: 800px; height: 500px; overflow: auto; margin: 0 auto;">
    <table style="border-collapse: collapse; width: 100%;">
        <!-- 表头 -->
        <tr>
            {% for col in df.columns %}
            <td style="border: 1px solid #ddd; padding: 8px; background: #f5f5f5;">
                <b>{{col}}</b>
            </td>
            {% endfor %}
        </tr>
        <!-- 表体数据 -->
        {% for index, row in df.iterrows %}
        <tr>
            {% for cell in row %}
            <td style="border: 1px solid #ddd; padding: 8px;">
                {{cell}}
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>
</div>

关键CSS说明： #

• width: 800px; height: 500px;：自定义容器固定尺寸，可根据页面需求调整数值
• overflow: auto;：内容超出容器时自动显示水平/垂直滚动条
• border-collapse: collapse;：合并表格边框，避免出现双边框影响观感
• width: 100%;：让表格宽度自适应容器，确保水平滚动正常触发

进阶优化：固定表头（仅表体滚动） #

如果需要表头固定不滚动，仅表体内容滚动，可以拆分表头和表体，分别处理：

<div style="width: 800px; margin: 0 auto;">
    <!-- 固定表头 -->
    <table style="border-collapse: collapse; width: 100%;">
        <tr>
            {% for col in df.columns %}
            <td style="border: 1px solid #ddd; padding: 8px; background: #f5f5f5;">
                <b>{{col}}</b>
            </td>
            {% endfor %}
        </tr>
    </table>
    <!-- 表体滚动容器 -->
    <div style="height: 470px; overflow-y: auto; border-left: 1px solid #ddd; border-right: 1px solid #ddd;">
        <table style="border-collapse: collapse; width: 100%;">
            {% for index, row in df.iterrows %}
            <tr>
                {% for cell in row %}
                <td style="border: 1px solid #ddd; padding: 8px; border-top: none;">
                    {{cell}}
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </table>
    </div>
    <!-- 底部边框（可选，补全表格样式） -->
    <div style="height: 1px; background: #ddd;"></div>
</div>

注意点： #

• 表体容器的高度要减去表头的高度，避免整体超出预期尺寸
• 若列宽不一致，可给<td>添加固定宽度（如width: 150px;）保证表头和表体列对齐

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