JupyterLab – How to Change Style and Width of Cells

csshtmlipythonjupyter-labpython-3.x

I tried

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

from this answer. I also tried

%%html
<style>.container { width:60% !important; }</style>

but they don't work.

enter image description here

Best Answer

The names of classes were reworked in JupyterLab and are now easier to understand and more predictable. Use the following selectors for JupyterLab:

  • .jp-Cell to change the width of all cells
  • .jp-Cell.jp-CodeCell to change only width of the cells with code
  • .jp-Cell.jp-MarkdownCell to change the width of markdown cells
  • .jp-Cell.jp-Editor to change width of the editor only
  • .jp-OutputArea-output to change the with of cell outputs

For example, to reduce the width of cells using IPython you could use:

from IPython.core.display import display, HTML
display(HTML("<style>.jp-Cell { width: 60% !important; }</style>"))

You can use the DOM inspector, a tool that all browsers provide nowadays, (see the instructions here) to check class names of specific elements that you wish to modify.

Related Question