如何固定Jupyter Notebook输出表格首行及设置横向滚动条位置

一、固定表格首行（列名） #

通过自定义HTML/CSS修改Jupyter表格样式，即可实现表头固定。核心是给表头设置粘性定位，同时限制表格内容区域高度触发垂直滚动。

在Jupyter中运行以下代码即可生效：

from IPython.display import display, HTML

display(HTML("""
<style>
/* 限制表格内容区域高度，触发垂直滚动 */
div.output_area pre {
    max-height: 600px; /* 可根据需求自定义高度 */
    overflow-y: auto;
}

/* 固定表头 */
div.output_area table thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

/* 强化表头底部边框，避免被内容遮挡 */
div.output_area table thead th {
    border-bottom: 2px solid #ccc;
}
</style>
"""))

• max-height：控制表格内容的最大显示高度，超出后自动出现垂直滚动条
• position: sticky + top:0：让表头随滚动固定在容器顶部
• 白色背景确保表头不会被下方内容透显

二、将横向滚动条固定在屏幕底部 #

通过调整滚动容器的定位规则，让横向滚动条始终贴在屏幕底部，而非输出区域底部。

运行以下代码实现：

from IPython.display import display, HTML

display(HTML("""
<style>
/* 调整输出区域布局 */
div.output_area {
    position: relative;
    margin-bottom: 0;
}

/* 固定滚动容器到屏幕底部 */
div.output_area pre {
    overflow-x: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: calc(100vh - 100px); /* 预留顶部空间，避免遮挡菜单栏 */
    width: 100%;
}

/* 适配表格宽度 */
div.output_area table {
    width: 100%;
    table-layout: auto;
}
</style>
"""))

• position: fixed：将滚动容器固定在屏幕底部
• calc(100vh - 100px)：根据屏幕高度计算内容区域高度，可自行调整100px数值适配不同布局

三、同时实现两种需求的完整代码 #

如果需要同时固定表头和屏幕底部横向滚动条，合并两种CSS规则即可：

from IPython.display import display, HTML

display(HTML("""
<style>
div.output_area {
    position: relative;
    margin-bottom: 0;
}

div.output_area pre {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

div.output_area table thead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

div.output_area table thead th {
    border-bottom: 2px solid #ccc;
}

div.output_area table {
    width: 100%;
    table-layout: auto;
}
</style>
"""))

注：若使用自定义Jupyter主题，可能需要微调calc中的数值或定位偏移量，以适配你的环境。

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