如何设置Jupyter Notebook导出HTML文件的单元格宽度？

一、导出前在Jupyter内设置（推荐） #

通过自定义Jupyter的CSS样式，让导出的HTML自动继承固定宽度：

• 定位Jupyter的自定义CSS目录：
  • Linux/macOS路径：~/.jupyter/custom/custom.css
  • Windows路径：C:\Users\<你的用户名>\.jupyter\custom\custom.css
• 若目录中无custom.css文件，直接新建该文件；
• 在文件中添加以下样式代码：

/* 限制单元格容器最大宽度，匹配Jupyter默认显示效果 */
.container {
    width: 90% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* 让Markdown图片自适应容器宽度，避免溢出 */
.rendered_html img {
    max-width: 100% !important;
    height: auto !important;
}

• 重启Jupyter Notebook后重新导出HTML，即可获得固定宽度的页面。

二、导出HTML后手动调整 #

若已导出HTML文件，可直接修改文件内容修复：

• 用文本编辑器打开目标HTML文件；
• 找到文件头部的<style>标签区块；
• 在<style>标签内插入上述CSS代码；
• 保存文件后，浏览器打开即可看到单元格宽度被限制，图片自适应显示。

注：两种方法均不会影响Bokeh图表的交互功能，仅调整页面布局宽度。

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