html - How to change the style/width of cells in JupyterLab?

Question

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.

Answer 1

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.