CODEWITHSUNDEEP
pythonpandasjupyter-notebooknbconvert
Jonatas Eduardo
Jonatas Eduardo

Reputation: 685

jupyter nbconvert --to html --no-inp is shrinking the display of centralized tables

Using the following code I am able to display nice side-by-side centralized tables in my jupyter notebook or in the converted HTML with code

import pandas as pd
import numpy as np
from IPython.display import display, HTML
display(HTML("""
<style>
.output {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
</style>
"""))

df = pd.DataFrame(10000*np.ones((2,2)), columns = ['foo','bar'])
display(df)
display(df)

enter image description here

Nevertheless, if I convert myfile.ipynb to myfile.html without code using jupyter nbconvert --to html --no-inp myfile.ipynb the tables display with almost no horizontal space with long scroll bars, making them fairly unusable.

enter image description here

What can I do to keep the tables display as they are in the jupyter notebook?

Upvotes: 2

Views: 1101

Answers (1)

Tadhg McDonald-Jensen
Tadhg McDonald-Jensen

Reputation: 21453

I'm not sure exactly why the table thinks it needs to take up less space when there is so much available, by inspecting the html I can see lots of weird prompt and other empty containers... anyway...

the html styles that make the table get a scroll bar instead of just taking up full space is overflow-x in the .output_subarea element which is set to auto by something, which doesn't seem to be playing nicely with the other auto generated elements in a flex context. so by setting it to unset I was able to show the full tables without scroll bars, not 100% sure this will do exactly what you want but seemed to fix similar issue for me.

display(HTML("""
<style>
.output {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
div.output_subarea {
    overflow-x: unset
}
"""))

It's quite possible this means that large tables will just take up all the space and never get a scroll bar, there is probably a better solution that could be found with more investigation but I'm not sure searching through css of Jupyter is the best way but I can't think of any other way. Hopefully this works for your case. :)

Upvotes: 2

Related Questions