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

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

谢谢

---

编辑：2017年5月

我现在使用jupyterthemes：

这个命令是：

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

---

它将宽度设置为100%，主题很好。

您可以通过从任何单元格调用样式表来设置笔记本的CSS。作为一个例子，我们来看看

特别是，创建一个包含

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

---

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

您可以通过从任何单元格调用样式表来设置笔记本的CSS。作为一个例子，我们来看看

特别是，创建一个包含

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

---

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

我的IPython实际上无法使用

div.cell

解决方案，但幸运的是，有人建议了一种新IPythons的工作解决方案：

创建一个包含内容的文件

~/.ipython/profile\u default/static/custom/custom.css

（ipython）或

~/.jupyter/custom/custom.css

（jupyter）

.container { width:100% !important; }

---

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

我的IPython实际上无法使用

div.cell

解决方案，但幸运的是，有人为新IPythons提出了一个可行的解决方案：

创建一个包含内容的文件

~/.ipython/profile\u default/static/custom/custom.css

（ipython）或

~/.jupyter/custom/custom.css

（jupyter）

.container { width:100% !important; }

---

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

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

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

从IPython.core.display导入显示，HTML
显示（HTML（“.container{width:100%！important；}”））

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

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

从IPython.core.display导入显示，HTML
显示（HTML（“.container{width:100%！important；}”））

为了让jupyter（4.0.6版）能够使用，我创建了

~/.jupyter/custom/custom.css

，其中包含：

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

/*使笔记本电脑电池占据几乎所有可用宽度*/
.集装箱{
宽度：99%！重要；
}   
/*防止编辑单元格突出显示框被剪裁；
*重要信息，以便在单元格处于编辑模式时也可以使用*/
选定的分区单元{
边框左侧宽度：1px！重要；
}

为了让jupyter（4.0.6版）能够使用，我创建了

~/.jupyter/custom/custom.css

，其中包含：

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

/*使笔记本电脑电池占据几乎所有可用宽度*/
.集装箱{
宽度：99%！重要；
}   
/*防止编辑单元格突出显示框被剪裁；
*重要信息，以便在单元格处于编辑模式时也可以使用*/
选定的分区单元{
边框左侧宽度：1px！重要；
}

（从2018年起，我建议尝试JupyterHub/JupyterLab。它使用显示器的全宽。如果这不是一个选项，可能因为您使用的是基于云的Jupyter-As-a-service提供商之一，请继续阅读）

（Style被指控窃取用户数据，我转而使用触控笔插件）

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

我专门为垂直方向的高分辨率屏幕制作了一种样式，它使单元格更宽，并在底部添加了一点空白，这样您就可以将最后一个单元格定位在屏幕的中心。 当然，你可以根据自己的喜好修改我的css，如果你有不同的布局，或者你不希望最后有额外的空间

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

（从2018年起，我建议尝试JupyterHub/JupyterLab。它使用显示器的全宽。如果这不是一个选项，可能因为您使用的是基于云的Jupyter-As-a-service提供商之一，请继续阅读）

（Style被指控窃取用户数据，我转而使用触控笔插件）

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

我专门为垂直方向的高分辨率屏幕制作了一种样式，它使单元格更宽，并在底部添加了一点空白，这样您就可以将最后一个单元格定位在屏幕的中心。 当然，你可以根据自己的喜好修改我的css，如果你有不同的布局，或者你不希望最后有额外的空间

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

---

在新安装之后，我通常会修改存储所有视觉样式的主css文件。我使用Miniconda，但位置与其他类似

C:\Miniconda3\Lib\site packages\notebook\static\style\style.min.css

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

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

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

编辑后

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

保存并重新启动笔记本电脑

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

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

/* 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;
}