如何在浏览器中增加 Jupyter/ipython notebook 的单元格宽度？

How do I increase the cell width of the Jupyter/ipython notebook in my browser?

提问by vgoklani

I would like to increase the width of the ipython notebook in my browser. I have a high-resolution screen, and I would like to expand the cell width/size to make use of this extra space.

我想增加浏览器中 ipython 笔记本的宽度。我有一个高分辨率屏幕，我想扩大单元格宽度/大小以利用这个额外的空间。

Thanks!

谢谢！

---

---

edit: 5/2017

编辑：5/2017

I now use jupyterthemes: https://github.com/dunovank/jupyter-themes

我现在使用 jupyterthemes：https: //github.com/dunovank/jupyter-themes

and this command:

和这个命令：

jt -t oceans16 -f roboto -fs 12 -cellw 100%

which sets the width to 100% with a nice theme.

它将宽度设置为 100% 并带有一个不错的主题。

采纳答案by jjinking

If you don't want to change your default settings, and you only want to change the width of the current notebook you're working on, you can enter the following into a cell:

如果您不想更改默认设置，而只想更改您正在处理的当前笔记本的宽度，则可以在单元格中输入以下内容：

from IPython.core.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))

回答by Ian

You can set the CSS of a notebook by calling a stylesheet from any cell. As an example, take a look at the 12 Steps to Navier Stokes course.

您可以通过从任何单元格调用样式表来设置笔记本的 CSS。举个例子，看看12 Steps to Navier Stokes 课程。

In particular, creating a file containing

特别是，创建一个包含

<style>
    div.cell{
        width:100%;
        margin-left:1%;
        margin-right:auto;
    }
</style>

should give you a starting point. However, it may be necessary to also adjust e.g div.text_cell_renderto deal with markdown as well as code cells.

应该给你一个起点。但是，可能还需要进行调整，例如div.text_cell_render处理降价和代码单元。

If that file is custom.cssthen add a cell containing:

如果该文件custom.css然后添加一个包含以下内容的单元格：

from IPython.core.display import HTML
def css_styling():
    styles = open("custom.css", "r").read()
    return HTML(styles)
css_styling()

This will apply all the stylings, and, in particular, change the cell width.

这将应用所有样式，特别是更改单元格宽度。

回答by Gerenuk

That div.cellsolution didn't actually work on my IPython, however luckily someone suggested a working solution for new IPythons:

该div.cell解决方案实际上不适用于我的 IPython，但幸运的是有人为新的 IPython 提出了一个可行的解决方案：

Create a file ~/.ipython/profile_default/static/custom/custom.css(iPython) or ~/.jupyter/custom/custom.css(Jupyter) with content

创建包含内容的文件~/.ipython/profile_default/static/custom/custom.css(iPython) 或~/.jupyter/custom/custom.css(Jupyter)

.container { width:100% !important; }

Then restart iPython/Jupyter notebooks. Note that this will affect all notebooks.

然后重新启动 iPython/Jupyter 笔记本。请注意，这将影响所有笔记本。

回答by jvd10

To get this to work with jupyter (version 4.0.6) I created ~/.jupyter/custom/custom.csscontaining:

为了让它与 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;
}

回答by volodymyr

(As of 2018, I would advise trying out JupyterHub/JupyterLab. It uses the full width of the monitor. If this is not an option, maybe since you are using one of the cloud-based Jupyter-as-a-service providers, keep reading)

（截至 2018 年，我建议尝试使用 JupyterHub/JupyterLab。它使用显示器的整个宽度。如果这不是一个选项，也许因为您使用的是基于云的 Jupyter 即服务提供商之一，继续阅读）

(Stylish is accused of stealing user data, I have moved on to using Stylus plugin instead)

（Stylish 被指控窃取用户数据，我已转而使用 Stylus 插件）

I recommend using Stylish Browser Plugin. This way you can override css for all notebooks, without adding any code to notebooks. We don't like to change configuration in .ipython/profile_default, since we are running a shared Jupyter server for the whole team and width is a user preference.

我推荐使用Stylish Browser Plugin。通过这种方式，您可以覆盖所有笔记本的 css，而无需向笔记本添加任何代码。我们不喜欢更改 .ipython/profile_default 中的配置，因为我们正在为整个团队运行共享的 Jupyter 服务器，并且宽度是用户首选项。

I made a style specifically for vertically-oriented high-res screens, that makes cells wider and adds a bit of empty-space in the bottom, so you can position the last cell in the centre of the screen. https://userstyles.org/styles/131230/jupyter-wideYou can, of course, modify my css to your liking, if you have a different layout, or you don't want extra empty-space in the end.

我专门为垂直方向的高分辨率屏幕制作了一种样式，它使单元格更宽并在底部增加了一点空白空间，因此您可以将最后一个单元格放置在屏幕中央。 https://userstyles.org/styles/131230/jupyter-wide您当然可以根据自己的喜好修改我的 css，如果您有不同的布局，或者您最终不想要额外的空白空间。

Last but not least, Stylish is a great tool to have in your toolset, since you can easily customise other sites/tools to your liking (e.g. Jira, Podio, Slack, etc.)

最后但并非最不重要的一点是，Stylish 是您工具集中的绝佳工具，因为您可以根据自己的喜好轻松自定义其他站点/工具（例如 Jira、Podio、Slack 等）

@media (min-width: 1140px) {
  .container {
    width: 1130px;
  }
}

.end_space {
  height: 800px;
}

回答by Gunay Anach

What I do usually after new installation is to modify the main css file where all visual styles are stored. I use Miniconda but location is similar with others C:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css

我在新安装后通常做的是修改存储所有视觉样式的主 css 文件。我使用 Miniconda 但位置与其他人相似C:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css

With some screens these resolutions are different and more than 1. To be on the safe side I change all to 98% so if I disconnect from my external screens on my laptop I still have 98% screen width.

对于某些屏幕，这些分辨率不同且大于 1。为了安全起见，我将所有分辨率都更改为 98%，因此如果我与笔记本电脑上的外部屏幕断开连接，我仍然拥有 98% 的屏幕宽度。

Then just replace 1140px with 98%of the screen width.

然后只需将1140px替换为屏幕宽度的98%。

@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

After editing

编辑后

@media (min-width: 1200px) {
  .container {
    width: 98%;
  }
}

Save and restart your notebook

保存并重启你的笔记本

---

---

Update

更新

Recently had to wider Jupyter cells on an environment it is installed, which led me to come back here and remind myself.

最近不得不在它安装的环境上更广泛的 Jupyter 单元，这让我回到这里并提醒自己。

If you need to do it in virtual env you installed jupyter on. You can find the css file in this subdir

如果您需要在虚拟环境中执行此操作，请在其上安装 jupyter。您可以在此子目录中找到 css 文件

env/lib/python3.6/site-packages/notebook/static/style/stye.min.css

回答by bizi

For Chrome users, I recommend Stylebot, which will let you override any CSS on any page, also let you search and install other share custom CSS. However, for our purpose we don't need any advance theme. Open Stylebot, change to Edit CSS. Jupyter captures some keystrokes, so you will not be able to type the code below in. Just copy and paste, or just your editor:

对于 Chrome 用户，我推荐Stylebot，它可以让您覆盖任何页面上的任何 CSS，还可以让您搜索和安装其他共享自定义 CSS。但是，出于我们的目的，我们不需要任何高级主题。打开 Stylebot，更改为Edit CSS. Jupyter 会捕获一些按键，因此您将无法输入以下代码。只需复制和粘贴，或仅使用您的编辑器：

#notebook-container.container {
    width: 90%;
}

Change the width as you like, I find 90% looks nicer than 100%. But it is totally up to your eye.

根据需要更改宽度，我发现 90% 看起来比 100% 好看。但这完全取决于您的眼睛。

回答by Thamme Gowda

It's time to use jupyterlab

是时候使用jupyterlab

Finally, a much-needed upgrade has come to notebooks. By default, it uses the full width of your window like any other full-fledged native IDE.

最后，笔记本电脑急需升级。默认情况下，它像任何其他成熟的本机 IDE 一样使用窗口的整个宽度。

All you have to do is:

您所要做的就是：

pip install jupyterlab
# if you use conda
conda install -c conda-forge jupyterlab
# to run 
jupyter lab    # instead of jupyter notebook

Here is a screenshot from blog.Jupyter.org

这是来自 blog.Jupyter.org 的截图

回答by AaronDT

This is the code I ended up using. It stretches input & output cells to the left and right. Note that the input/output number indication will be gone:

这是我最终使用的代码。它将输入和输出单元向左和向右拉伸。请注意，输入/输出编号指示将消失：

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>"))

回答by smishra

I tried everything and nothing worked for me, I ended up using displaying my data frame as HTML as follows

我尝试了一切，但没有任何效果，我最终使用将我的数据框显示为 HTML，如下所示

from IPython.display import HTML    
HTML (pd.to_html())