如何增加浏览器中 Jupyter/ipython 笔记本的单元格宽度？
- 2025-02-14 09:50:00
- admin 原创
- 62
问题描述：
我想增加浏览器中 ipython 笔记本的宽度。我有一个高分辨率屏幕，我想扩大单元格宽度/大小以利用这个额外的空间。
谢谢！
解决方案 1：
如果您不想更改默认设置，而只想更改您正在处理的当前笔记本的宽度，则可以在单元格中输入以下内容：
from IPython.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))
解决方案 2：
该div.cell解决方案实际上并不适用于我的 IPython，但幸运的是，有人为新的 IPython 提出了一个可行的解决方案：
创建包含内容的文件~/.ipython/profile_default/static/custom/custom.css(iPython) 或~/.jupyter/custom/custom.css(Jupyter)
.container { width:100% !important; }
然后重新启动 iPython/Jupyter 笔记本。请注意，这将影响所有笔记本。
解决方案 3：
为了使其与 jupyter (版本 4.0.6) 一起工作，我创建了~/.jupyter/custom/custom.css包含以下内容：
/* Make the notebook cells take almost all available width */
.container {
width: 99% !important;
}
/* Prevent the edit cell highlight box from getting clipped;
* important so that it also works when cell is in edit mode*/
div.cell.selected {
border-left-width: 1px !important;
}
解决方案 4：
对于笔记本 7，您可以使用：
from IPython.display import display, HTML
display(HTML("<style>:root { --jp-notebook-max-width: 100% !important; }</style>"))
解决方案 5：
是时候使用jupyterlab了
最后，笔记本迎来了急需的升级。默认情况下，Jupyter-lab 会使用整个窗口宽度，就像任何其他功能齐全的原生 IDE 一样（无需调整）。
您可以通过 pip 或 conda 安装它。
# Option 1: using pip
pip install jupyterlab
# Option 2: using conda
conda install -c conda-forge jupyterlab
要启动，只需替换noteboook为lab
jupyter lab # instead of "jupyter notebook"
以下是来自 blog.Jupyter.org 的截图
解决方案 6：
我通常在新安装后会修改存储所有视觉样式的主 css 文件。我使用 Miniconda，但位置与其他类似`C:Miniconda3Libsite-packages
otebookstaticstylestyle.min.css`
对于某些屏幕，这些分辨率是不同的，并且大于 1。为了安全起见，我将所有分辨率都改为 98%，因此如果我断开笔记本电脑上外接屏幕的连接，我仍然有 98% 的屏幕宽度。
然后只需将1140px 替换为 98％的屏幕宽度。
@media (min-width: 1200px) {
.container {
width: 1140px;
}
}
编辑后
@media (min-width: 1200px) {
.container {
width: 98%;
}
}
保存并重启笔记本
更新
最近必须在安装它的环境中扩展 Jupyter 单元，这让我回到这里并提醒自己。
如果你需要在安装 jupyter 的虚拟环境中执行此操作。你可以在此子目录中找到 css 文件
env/lib/python3.6/site-packages/notebook/static/style/stye.min.css
解决方案 7：
这是我最终使用的代码。它将输入和输出单元格向左和向右拉伸。请注意，输入/输出编号指示将消失：
from IPython.core.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))
display(HTML("<style>.output_result { max-width:100% !important; }</style>"))
display(HTML("<style>.prompt { display:none !important; }</style>"))
解决方案 8：
您可以通过从任何单元格调用样式表来设置笔记本的 CSS。例如，请查看Navier Stokes 的 12 个步骤课程。
具体来说，创建一个包含
<style>
div.cell{
width:100%;
margin-left:1%;
margin-right:auto;
}
</style>
应该可以为您提供一个起点。但是，可能还需要进行调整，例如div.text_cell_render处理 markdown 和代码单元。
如果该文件是，custom.css则添加一个包含以下内容的单元格：
from IPython.core.display import HTML
def css_styling():
styles = open("custom.css", "r").read()
return HTML(styles)
css_styling()
这将应用所有样式，特别是改变单元格宽度。
解决方案 9：
（截至 2018 年，我建议尝试 JupyterHub/JupyterLab。它使用显示器的整个宽度。如果这不是一个选项，可能是因为你正在使用基于云的 Jupyter 即服务提供商之一，请继续阅读）
（Stylish 被指控窃取用户数据，我已转而使用 Stylus 插件）
我建议使用Stylish Browser Plugin。这样，您可以覆盖所有笔记本的 css，而无需向笔记本添加任何代码。我们不喜欢更改 .ipython/profile_default 中的配置，因为我们为整个团队运行共享的 Jupyter 服务器，并且宽度是用户偏好。
我专门为垂直方向的高分辨率屏幕制作了一种样式，它使单元格更宽并在底部添加了一些空白空间，这样您就可以将最后一个单元格放置在屏幕的中央。
https://userstyles.org/styles/131230/jupyter-wide
当然，如果您有不同的布局，或者您不想在最后有额外的空白空间，您可以根据自己的喜好修改我的 css。
最后但同样重要的一点是，Stylish 是您工具集中的一个很棒的工具，因为您可以轻松地根据自己的喜好定制其他网站/工具（例如 Jira、Podio、Slack 等）。
@media (min-width: 1140px) {
.container {
width: 1130px;
}
}
.end_space {
height: 800px;
}
解决方案 10：
2024 Jupyter Notebook v.7
获取您的配置位置，在终端类型中：
jupyter --paths
示例结果：
配置：/用户/用户名/.jupyter
创建“自定义”文件夹：
mkdir -pv ~/.jupyter/custom/创建“custom.css”文件：
touch ~/.jupyter/custom/custom.css打开“自定义”文件夹：
open ~/.jupyter/custom/将此行写入“custom.css”文件：
.jp-WindowedPanel-outer {padding:0 !important;}刷新你的 jupyter 浏览器标签：
CMD+R
“~” 和 “/Users/USERNAME/” 通常可以互换
解决方案 11：
对于 Chrome 用户，我推荐Stylebot，它可以让您覆盖任何页面上的任何 CSS，还可以让您搜索和安装其他共享自定义 CSS。但是，对于我们的目的，我们不需要任何高级主题。打开 Stylebot，更改为Edit CSS。Jupyter 会捕获一些击键，因此您将无法输入以下代码。只需复制和粘贴，或者只需使用您的编辑器：
#notebook-container.container {
width: 90%;
}
随意改变宽度，我发现 90% 看起来比 100% 好看。但这完全取决于你的眼光。
解决方案 12：
请注意，如果您按照旧方法执行此操作，您现在将收到弃用警告。这使用较新的子模块命名：
from IPython.display import HTML
HTML("<style>.container { width:100% !important; }</style>")
解决方案 13：
我对@jvd10的解决方案做了一些修改。'!important' 似乎太强了，以至于在显示 TOC 侧边栏时容器无法很好地适应。我删除了它并添加了 'min-width' 来限制最小宽度。
这是我的.juyputer/custom/custom.css：
/* Make the notebook cells take almost all available width and limit minimal width to 1110px */
.container {
width: 99%;
min-width: 1110px;
}
/* Prevent the edit cell highlight box from getting clipped;
* important so that it also works when cell is in edit mode*/
div.cell.selected {
border-left-width: 1px;
}
解决方案 14：
我尝试了所有方法，但都不起作用，最后我使用 HTML 显示我的数据框，如下所示
from IPython.display import HTML
HTML (pd.to_html())
解决方案 15：
对于 Firefox/Chrome 用户来说，实现 100% 宽度的一个好方法是使用自定义TamperMonkey脚本。
好处是
在浏览器中配置一次即可，无需修改服务器配置。
与多个 jupyter 服务器配合使用。
TamperMonkey 值得信赖、维护良好且稳定。
通过 javascript 可以实现大量额外的定制。
解决方案 16：
添加@jdv10 和@gerenuk 的答案
最好的选择是添加和调整 custom.css 文件。下面我分享了我的 CSS 文件内容，我用它来挤出 Jupyter Notebook 中的最大屏幕区域。
由于它针对的是呈现页面的原始 CSS 代码，因此它应该适用于 Notebook 上用于编码的所有类型的语言。
/* Notebook styling */
body, p, div.rendered_html {
color: #93a1a1;
font-family: 'PT Serif', Georgia, Times, 'Times New Roman', serif;
font-size: 11pt;
}
body { background-color: #eee8d5 !important; }
/* the following controls aspects which are around the cells */
#notebook {
background-color: #073642 !important;
box-shadow: inset 20px 36px 20px -35px black !important;
margin: 1px !important;
padding: 1px !important;
}
#notebook-container {
padding: 2px !important;
}
/* Make the notebook cells take almost all available width */
.container {
width:99.5% !important;
/*margin:.5% !important;*/
/*color: #93a1a1 !important;*/
color: black !important;
background-color: lightblue !important;
}
/* Cell output */
.rendered_html pre, .rendered_html code {
color: inherit !important;
background-color: inherit !important;
}
.rendered_html table, .rendered_html td, .rendered_html th {
border: 1px solid #586e75 !important;
}
div.cell {
width:100% !important;
margin: 5px !important;
/* margin-left:2px !important; */
/* margin-right:2px !important; */
padding: 2px !important;
/* the following overrides the background color of the input area */
/* background-color: yellow !important; */
/* border-color: black !important; */
}
/* Prevent the edit cell highlight box from getting clipped; * important so that it also works when cell is in edit mode*/
div.cell.selected {
border-left-width: 5px !important;
border-right-width: 1px !important;
border-top-width: 2px !important;
border-bottom-width: 2px !important;
border-color: red !important;
}
/*this is for the area to the left of the editor or input area*/
div.run_this_cell {
width: auto !important;
color: green !important;
padding: 0 !important;
padding-top: 5px !important;
padding-left: 5px !important;
font-weight: bold !important;
font: 2em sans-serif;
}
div.input_area {
border-color: green !important;
background-color: #ffffdd !important;
}
.prompt {
line-height: 1em !important;
}
div.prompt {
min-width: auto;
background-color: white;
}
div.input_prompt {
color: #268bd2 !important;
color: #000000 !important;
font-weight: bold !important;
border: 1px solid #ff9900 !important;
background-color: greenyellow;
padding-right: 0px !important;
text-align: center !important;
width: auto !important;
font-size: 10px !important;
}
div.output_area {
color: #000000 !important;
background-color: #e2e2ff !important;
font-size: 0.9em !important;
}
/* Syntax highlighting */
.cm-s-ipython span.cm-comment {
/*color: #6c71c4 !important;*/
color: midnightblue !important;
color: rgb(100, 100, 170) !important;
font-style: italic !important;
}
.cm-s-ipython span.cm-string {
color: rgb(100, 20, 29) !important;
}运行代码片段Hide results展开片段
解决方案 17：
在 Jupyter Notebook 7.3 及更高版本中，可以使用“启用全宽笔记本”选项。这将增加输入和输出单元的宽度。文件管理器的宽度保持不变。之后，单元格看起来如下。
