ENH: Always display column headers in HTML output when scrolling down on long dataframes

[ogrisel]

Is your feature request related to a problem?

I sometimes need to visually screen several hundreds of records. For this I do:

pd.set_option('display.max_rows', 300)

and then display the dataframe in the output cell of a jupyter notebook.

However if the dataframe is long enough to not fit in a single browser window, scrolling down hides the column headers and it makes it really hard to interpret the content of bottom records.

Describe the solution you'd like

It would be very nice to use some CSS wizardry to always keep the column headers visible just below the top edge of the browser viewport when scrolling down in a notebook with a long dataframe that does not fit entirely in the browser viewport at once.

Alternatively solution

An alternative it to slice the long DF into chunks and display with 50 or so records and display each chunk sequentially so that each of them always fit on the screen. But this is tedious and generates many jupyter cells which is not necessarily desired.

[attack68]

This is already possible if you know the CSS solution:

pd.DataFrame(np.random.randn(200, 3)).style.set_table_styles([
    {'selector': 'thead th', 'props': 'position: sticky; top:0; background-color:red;'}
])

I don't think this needs additional API but a documentation example might be good. Will leave open until then..

[attack68]

also a duplicate of #29072