如何设置Jupyter Notebook中代码单元格与输出单元格的不同宽度？解决输出单元格宽度调整无效问题

我来帮你搞定这个输出单元格宽度的问题！你之前的尝试没生效，主要是因为Jupyter（尤其是JupyterLab）的CSS类层级和选择器需要更精确的定位，咱们一步步来解决：

一、针对JupyterLab的有效解决方案 #

你已经成功设置了代码和Markdown单元格的宽度，现在只需要补充针对输出区域的精准CSS规则即可。直接运行下面的代码，就能让输出单元格占满100%宽度，同时保证图表/图片能自适应：

from IPython.core.display import display, HTML

# 保留你已有的代码、Markdown单元格宽度设置
display(HTML("<style>.jp-Cell.jp-CodeCell { width: 70% !important; margin: 0 auto; }</style>"))
display(HTML("<style>.jp-Cell.jp-MarkdownCell { width: 90% !important; margin: 0 auto; }</style>"))

# 新增输出单元格宽度设置
display(HTML("""
<style>
/* 控制代码单元格的输出容器宽度 */
.jp-Cell.jp-CodeCell .jp-Cell-outputWrapper {
    width: 100% !important;
    margin: 0 auto;
}
/* 确保输出内容区域充满容器 */
.jp-OutputArea {
    width: 100% !important;
}
/* 让图表、图片等输出元素自适应容器宽度 */
.jp-OutputArea-output img,
.jp-OutputArea-output svg,
.jp-OutputArea-output canvas {
    max-width: 100% !important;
    height: auto !important;
}
</style>
"""))

为什么之前的代码没生效？ #

你之前用的.jp-OutputArea-output只是单个输出项的容器，而外层的.jp-Cell-outputWrapper才是控制整个代码单元格输出区域宽度的核心容器。另外，我们需要同时设置.jp-OutputArea来确保输出内容不会被父容器限制，最后针对图片/图表添加自适应规则，避免大型图表被截断。

二、如果是经典Jupyter Notebook（非Lab版本） #

如果你的环境是传统的Jupyter Notebook（不是Lab），类名会不一样，用下面的代码：

from IPython.core.display import display, HTML

# 经典版本的代码、Markdown单元格设置
display(HTML("<style>.code_cell { width: 70% !important; margin: 0 auto; }</style>"))
display(HTML("<style>.text_cell { width: 90% !important; margin: 0 auto; }</style>"))

# 经典版本的输出单元格设置
display(HTML("""
<style>
.code_cell .output_wrapper {
    width: 100% !important;
    margin: 0 auto;
}
.output_area {
    width: 100% !important;
}
.output_area img,
.output_area svg,
.output_area canvas {
    max-width: 100% !important;
    height: auto !important;
}
</style>
"""))

三、小技巧：自己定位CSS类 #

如果以后遇到类似的样式问题，你可以用浏览器的开发者工具（按F12）来精准定位元素：

• 右键点击输出单元格的任意位置，选择「检查」
• 在Elements面板里找到对应的HTML元素，查看它的class属性
• 用这些类名来编写更精准的CSS规则，确保样式能覆盖默认设置

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