blocks|key|159979|text|您可以通过从任何单元格调用样式表来设置notebook的CSS。作为一个例子，我们来看看12+Steps+to+Navier+Stokes+course。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|159980|特别是，创建一个包含以下内容的文件|159981|<style>
++++div.cell{
++++++++width:100%25;
++++++++margin-left:1%25;
++++++++margin-right:auto;
++++}
</style>|code-block|syntax|javascript|159982|应该会给你一个起点。然而，可能还需要调整例如div.text_cell_render来处理标记和编码单元格。|style|CODE|159983|如果文件为custom.css，则添加包含以下内容单元格：|159984|from+IPython.core.display+import+HTML
def+css_styling():
++++styles+=+open("custom.css",+"r").read()
++++return+HTML(styles)
css_styling()|159985|这将应用所有样式，特别是更改单元格宽度。|159986|entityMap|0|LINK|mutability|MUTABLE|url|https://bitbucket.org/cfdpython/cfd-python-class/overview^0|18|W|0|0|0|0|M|K|0|5|A|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|18|8|@$A|19|B|1A|M|N]]|9|@]|C|$]]|$1|O|3|P|5|6|7|1B|8|@$A|1C|B|1D|M|N]]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1E|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1F|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]]]

You can set the CSS of a notebook by calling a stylesheet from any cell. As an example, take a look at the <a href="https://bitbucket.org/cfdpython/cfd-python-class/overview" rel="noreferrer">12 Steps to Navier Stokes course</a>.

In particular, creating a file containing

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

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

If that file is <code>custom.css</code> then add a cell containing:

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

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

blocks|key|2966605|text|那个div.cell解决方案实际上在我的IPython上不起作用，然而幸运的是，有人为新的IPythons提出了一个有效的解决方案：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2966606|创建包含内容的文件~/.ipython/profile_default/static/custom/custom.css+(iPython)或~/.jupyter/custom/custom.css+(Jupyter|2966607|.container+{+width:100%25+!important;+}|code-block|syntax|javascript|2966608|然后重新启动iPython/Jupyter+notebooks。请注意，这将影响所有笔记本电脑。|2966609|entityMap^0|2|8|0|9|1F|1Z|S|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

That <code>div.cell</code> solution didn't actually work on my IPython, however luckily someone suggested a working solution for new IPythons:

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

<pre><code>.container { width:100% !important; }
</code></pre>

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

blocks|key|162357|text|如果您不想更改默认设置，并且只想更改正在处理的当前笔记本的宽度，则可以在单元格中输入以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162358|from+IPython.core.display+import+display,+HTML
display(HTML("<style>.container+{+width:100%25+!important;+}</style>"))|code-block|syntax|javascript|162359|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

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

blocks|key|2966748|text|为了让它与jupyter+(版本4.0.6)一起工作，我创建了包含以下内容的~/.jupyter/custom/custom.css：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2966749|/*+Make+the+notebook+cells+take+almost+all+available+width+*/
.container+{
++++width:+99%25+!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;
}|code-block|syntax|javascript|2966750|entityMap^0|12|S|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

To get this to work with jupyter (version 4.0.6) I created <code>~/.jupyter/custom/custom.css</code> containing:

<pre class="lang-css prettyprint-override"><code>/* 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;
}
</code></pre>

blocks|key|2754211|text|(截至2018年，我建议尝试JupyterHub/JupyterLab。它使用监视器的整个宽度。如果这不是一种选择，也许因为您使用的是基于云的Jupyter即服务提供商之一，请继续阅读)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2754212|(Stylish被指控窃取用户数据，我转而使用Stylus插件)|2754213|我推荐使用Stylish+Browser+Plugin。这样，您就可以覆盖所有notebooks的css，而无需向notebooks添加任何代码。我们不喜欢更改.ipython/profile_default中的配置，因为我们为整个团队运行的是一个共享的Jupyter服务器，而宽度是用户的偏好。|offset|length|2754214|我专门为垂直方向的高分辨率屏幕做了一个样式，它使单元格更宽，并在底部增加了一些空白空间，这样你就可以将最后一个单元格定位在屏幕的中心。当然，如果你有一个不同的布局，或者你最后不想要额外的空白，你可以根据你的喜好修改我的https://userstyles.org/styles/131230/jupyter-wide。|2754215|最后但并非最不重要的是，Stylish是你的工具集中的一个很好的工具，因为你可以很容易地根据你的喜好定制其他网站/工具(例如Jira，Podio，Slack等)。|2754216|@media+(min-width:+1140px)+{
++.container+{
++++width:+1130px;
++}
}

.end_space+{
++height:+800px;
}|code-block|syntax|javascript|2754217|entityMap|0|LINK|mutability|MUTABLE|url|https://userstyles.org/|1|https://userstyles.org/styles/131230/jupyter-wide^0|0|0|5|M|0|0|31|1D|1|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@$F|13|G|14|1|15]]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@$F|17|G|18|1|19]]|A|$]]|$1|J|3|K|5|6|7|1A|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1B|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

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

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

I recommend using <a href="https://userstyles.org/" rel="nofollow noreferrer">Stylish Browser Plugin</a>. 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.

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.
<a href="https://userstyles.org/styles/131230/jupyter-wide" rel="nofollow noreferrer">https://userstyles.org/styles/131230/jupyter-wide</a>
You 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.

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

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

.end_space {
 height: 800px;
}
</code></pre>

blocks|key|2966850|text|我通常在新安装后做的是修改存储所有视觉样式的主css文件。我使用Miniconda，但位置与其他C:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css相似|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2966851|对于某些屏幕，这些分辨率是不同的，甚至大于1。为了安全起见，我将所有分辨率都更改为98%25，因此如果我断开与笔记本电脑上的外部屏幕的连接，我仍然有98%25的屏幕宽度。|2966852|然后用屏幕宽度的98%25替换1140px。|BOLD|2966853|@media+(min-width:+1200px)+{
++.container+{
++++width:+1140px;
++}
}|code-block|syntax|javascript|2966854|​|2966855|📷|atomic|2966856|2966857|编辑后|2966858|@media+(min-width:+1200px)+{
++.container+{
++++width:+98%25;
++}
}|2966859|2966860|2966861|保存并重新启动您的笔记本|2966862|2966863|更新|2966864|最近不得不在一个更宽的Jupyter单元上安装它的环境，这让我回到这里并提醒自己。|2966865|如果您需要在虚拟环境中执行此操作，则需要安装jupyter。您可以在此子目录中找到css文件|2966866|env/lib/python3.6/site-packages/notebook/static/style/stye.min.css|2966867|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/761121c43eb2c6084711a9716593862a.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/c47e913a70a6064d2f00fbcb321284d5.png^0|1C|1V|0|0|D|7|0|0|0|1|0|0|1|0|1|0|0|0|1|0|0|3|0|0|1T|0|0|1|0|0|1|0|1|1|0|0|C|0|0|0|2|0|0|15|0|0|1A|0|0|1U|0^^$0|@$1|2|3|4|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1R|8|@$9|1S|A|1T|B|J]]|D|@]|E|$]]|$1|K|3|L|5|M|7|1U|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|1V|8|@$9|1W|A|1X|B|J]]|D|@]|E|$]]|$1|R|3|S|5|T|7|1Y|8|@$9|1Z|A|20|B|J]]|D|@$9|21|A|22|1|23]]|E|$]]|$1|U|3|Q|5|6|7|24|8|@$9|25|A|26|B|J]]|D|@]|E|$]]|$1|V|3|W|5|6|7|27|8|@$9|28|A|29|B|J]]|D|@]|E|$]]|$1|X|3|Y|5|M|7|2A|8|@$9|2B|A|2C|B|J]]|D|@]|E|$N|O]]|$1|Z|3|Q|5|6|7|2D|8|@$9|2E|A|2F|B|J]]|D|@]|E|$]]|$1|10|3|S|5|T|7|2G|8|@$9|2H|A|2I|B|J]]|D|@$9|2J|A|2K|1|2L]]|E|$]]|$1|11|3|12|5|6|7|2M|8|@$9|2N|A|2O|B|J]]|D|@]|E|$]]|$1|13|3|-4|5|6|7|2P|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|2Q|8|@$9|2R|A|2S|B|J]]|D|@]|E|$]]|$1|16|3|17|5|6|7|2T|8|@$9|2U|A|2V|B|J]]|D|@]|E|$]]|$1|18|3|19|5|6|7|2W|8|@$9|2X|A|2Y|B|J]]|D|@]|E|$]]|$1|1A|3|1B|5|M|7|2Z|8|@$9|30|A|31|B|J]]|D|@]|E|$N|O]]|$1|1C|3|-4|5|6|7|32|8|@]|D|@]|E|$]]]|1D|$1E|$5|1F|1G|1H|E|$1I|1J|1K|-4]]|1L|$5|1F|1G|1H|E|$1I|1M|1K|-4]]]]

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 <code>C:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css</code>

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.

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

<pre><code>@media (min-width: 1200px) {
 .container {
 width: 1140px;
 }
}
</code></pre>

<a href="https://i.stack.imgur.com/6adwp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6adwp.png" alt="enter image description here"></a>

After editing

<pre><code>@media (min-width: 1200px) {
 .container {
 width: 98%;
 }
}
</code></pre>

<a href="https://i.stack.imgur.com/GJlZ4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GJlZ4.png" alt="enter image description here"></a>
Save and restart your notebook 

<hr>

Update

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

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

<pre><code>env/lib/python3.6/site-packages/notebook/static/style/stye.min.css
</code></pre>

blocks|key|163781|text|对于Chrome用户，我推荐Stylebot，它可以让你覆盖任何页面上的任何CSS，也可以让你搜索和安装其他共享自定义CSS。但是，对于我们的目的，我们不需要任何高级主题。打开Stylebot，切换到Edit+CSS。Jupyter捕获了一些击键，因此您将无法键入以下代码。只需复制和粘贴，或只需您的编辑器：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|163782|#notebook-container.container+{
++++width:+90%25;
}|code-block|syntax|javascript|163783|如果你喜欢改变宽度，我发现90%25的看起来比100%25的好看。但这完全取决于你的眼睛。|163784|entityMap|0|LINK|mutability|MUTABLE|url|https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en^0|2S|8|E|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

For Chrome users, I recommend <a href="https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en" rel="noreferrer">Stylebot</a>, 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 <code>Edit CSS</code>. Jupyter captures some keystrokes, so you will not be able to type the code below in. Just copy and paste, or just your editor:

<pre><code>#notebook-container.container {
 width: 90%;
}
</code></pre>

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

blocks|key|2754427|text|是时候使用jupyterlab了|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2754428|最后，笔记本电脑有了一个亟需的升级。默认情况下，Jupyterlab像任何其他成熟的本机IDE一样使用窗口的全宽。|2754429|你要做的就是：|2754430|pip+install+jupyterlab
#+if+you+use+conda
conda+install+-c+conda-forge+jupyterlab
#+to+run+
jupyter+lab++++#+instead+of+jupyter+notebook|code-block|syntax|javascript|2754431|Here+is+a+screenshot+from+blog.Jupyter.org|2754432|📷|atomic|2754433|​|2754434|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jupyterlab/jupyterlab|1|https://blog.jupyter.org/jupyterlab-is-ready-for-users-5a6f039b8906|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1917d7fad3ee49184217238e5462eaee.png|imageAlt^0|5|A|0|0|0|0|0|0|16|1|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]]|C|$]]|$1|D|3|E|5|6|7|1D|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1E|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1F|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|O|3|P|5|Q|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|R|3|S|5|6|7|1O|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]|11|$5|W|X|Y|C|$Z|12]]|13|$5|14|X|15|C|$16|17|18|-4]]]]

It's time to use <a href="https://github.com/jupyterlab/jupyterlab" rel="nofollow noreferrer">jupyterlab</a>
Finally, a much-needed upgrade has come to notebooks. Jupyterlab uses the full width of your window like any other full-fledged native IDE by default.
All you have to do is:
<pre><code>pip install jupyterlab
# if you use conda
conda install -c conda-forge jupyterlab
# to run 
jupyter lab # instead of jupyter notebook
</code></pre>
<a href="https://blog.jupyter.org/jupyterlab-is-ready-for-users-5a6f039b8906" rel="nofollow noreferrer">Here is a screenshot from blog.Jupyter.org</a>
<img src="https://cdn-images-1.medium.com/max/1400/1*OneJZOqKqBZ9oN80kRX7kQ.png" alt="" />

blocks|key|2967063|text|这是我最终使用的代码。它将输入和输出单元格向左和向右拉伸。请注意，输入/输出编号指示将消失：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2967064|from+IPython.core.display+import+display,+HTML
display(HTML("<style>.container+{+width:100%25+!important;+}</style>"))
display(HTML("<style>.output_result+{+max-width:100%25+!important;+}</style>"))
display(HTML("<style>.prompt+{+display:none+!important;+}</style>"))|code-block|syntax|javascript|2967065|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>from IPython.core.display import display, HTML
display(HTML("&lt;style&gt;.container { width:100% !important; }&lt;/style&gt;"))
display(HTML("&lt;style&gt;.output_result { max-width:100% !important; }&lt;/style&gt;"))
display(HTML("&lt;style&gt;.prompt { display:none !important; }&lt;/style&gt;"))
</code></pre>

blocks|key|2967070|text|我尝试了所有的方法，但没有一个对我有效，我最终使用了将数据框显示为HTML格式，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2967071|from+IPython.display+import+HTML++++
HTML+(pd.to_html())|code-block|syntax|javascript|2967072|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>from IPython.display import HTML 
HTML (pd.to_html())
</code></pre>

blocks|key|160238|text|我对@jvd10的解决方案做了一些修改。“！important”似乎太强了，以至于当显示TOC侧边栏时，容器不能很好地适应。我删除了它，并添加了'min-+width‘来限制最小宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|160239|下面是我的.juyputer/custom/custom.css：|160240|/*+Make+the+notebook+cells+take+almost+all+available+width+and+limit+minimal+width+to+1110px+*/
.container+{
++++width:+99%25;
++++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;
}|code-block|syntax|javascript|160241|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I made some modification to @jvd10's solution. The '!important' seems too strong that the container doesn't adapt well when TOC sidebar is displayed. I removed it and added 'min-width' to limit the minimal width.

Here is my .juyputer/custom/custom.css:

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

blocks|key|160243|text|对于火狐/浏览器用户来说，一个达到100%25宽度的好方法就是使用一个自定义的TamperMonkey脚本。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|160244|好处是|160245|jupyter+servers.|160246|TamperMonkey是可信的，维护的，稳定的。|unordered-list-item|160247|可以通过javascript进行很多额外的定制。|ordered-list-item|160248|160249|160250|此脚本适用于我https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js|160251|entityMap|0|LINK|mutability|MUTABLE|url|https://www.tampermonkey.net/|1|https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js^0|11|C|0|0|0|0|0|0|0|0|7|3V|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|18|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]]|C|$]]|$1|R|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]|Z|$5|U|V|W|C|$X|10]]]]

For Firefox/Chrome users, a nice way to achieve 100% width is to use a custom <a href="https://www.tampermonkey.net/" rel="nofollow noreferrer">TamperMonkey</a> script.

The benefits are

<ol>
<li>configure this once in your browser, no need to modify the server configuration.</li>
<li>works with multiple jupyter servers.</li>
<li>TamperMonkey is trusted, maintained, and stable.</li>
<li>Lots of additional customization is possible via javascript.</li>
</ol>

This script works for me <a href="https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js" rel="nofollow noreferrer">https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js</a>

blocks|key|2754546|text|添加@jdv10和@gerenuk的答案|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2754547|2754548|最好的选择是添加并调整custom.css文件。下面我分享我的CSS文件内容，我用它在Jupyter+Notebook中挤出最大的屏幕区域。由于它的目标是渲染页面的普通CSS代码，因此它应该适用于在Notebook上编码的所有类型的语言。|blockquote|2754549|2754550|2754551|​|2754552|/*+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%25+!important;
++++/*margin:.5%25+!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%25+!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;
}|code-block|syntax|javascript|2754553|2754554|entityMap^0|0|H|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|Z|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|10|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|12|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|13|8|@]|D|@]|E|$Q|R]]|$1|S|3|M|5|6|7|14|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|U|$]]

adding to answers by @jdv10 and @gerenuk
<blockquote>
The best option is to add and tweak the custom.css file. Below I am
sharing my CSS file contents which I use to squeeze out the maximum
screen area in a Jupyter Notebook.
</blockquote>
<blockquote>
Since it targets the vanilla CSS codes of the rendered page, it is supposed to work for all types of
language used for coding on the Notebook.
</blockquote>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
}</code></pre>
</div>
</div>

blocks|key|163951|text|请注意，如果您使用旧方法执行此操作，您现在将收到一条弃用警告。这使用了较新的子模块命名：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163952|from+IPython.display+import+HTML

HTML("<style>.container+{+width:100%25+!important;+}</style>")|code-block|syntax|javascript|163953|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Note that if you do this the old way, you'll now get a deprecation warning. This uses the newer submodule naming:
<pre><code>from IPython.display import HTML

HTML(&quot;&lt;style&gt;.container { width:100% !important; }&lt;/style&gt;&quot;)
</code></pre>

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.
Thanks!
<hr />
EDIT / ANSWER : 5/2017
I now use jupyterthemes: <a href="https://github.com/dunovank/jupyter-themes" rel="noreferrer">https://github.com/dunovank/jupyter-themes</a>
and this command:
<pre><code>jt -t oceans16 -f roboto -fs 12 -cellw 100%
</code></pre>
which sets the width to 100% with a nice theme.

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

服务器

容器

我想在浏览器中增加ipython笔记本的宽度。我有一个高分辨率的屏幕，我想扩大单元格的宽度/大小，以利用这个额外的空间。谢谢!编辑/答案: 5/2017我现在使用jupyterthemes：还有这个命令：jt -t oceans16 -f roboto -fs 12 -cellw 100%它将宽度设置为100%，主题很...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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