Compat with jupyter's new HTML table style

[jorisvandenbossche]

See also discussion in jupyterlab/jupyterlab#961

With the upcoming notebook 5.0 release and in current jupyterlab, jupyter has a new (much better!) default HTML table styling. The only problem is that it fixes the width of columns hardcoded at 150 px.

IMO this is a problem. Not the default as such, but the fact that you cannot easily change this when you want to see long table content. The result is that when having cells/column names with long content (and sometimes you deliberately create such cells/column names), it is impossible to inspect those data with the default repr.
Only solutions are to inspect specifics such as df.values or df.columns.

Another consequence is that the pd.options.display.max_colwidth option becomes useless.

Possible way forward:

• override the max-width for our html repr's to set it to 'none' (@TomAugspurger shows here that this is possible: New table style truncates columns jupyterlab/jupyterlab#961 (comment))
• if we like the more narrow default, we can always decrease the default for pd.options.display.max_colwidth (currently 50 chars) at the same time. The the default looks similar to jupyter's one, but you have still the ability to adjust it with our options.

[jorisvandenbossche]

The overriding can be done by adding the following style to each _repr_html_:

<style type="text/css">
  table.dataframe td, table.dataframe th {
    max-width: none;
  }
</style>

Other options could be:

• see all data on hover
• wrap longer cells

[jorisvandenbossche]

Another issue is that, IMO, we should keep some kind of wrapping long text in multiple lines, see eg the notebook here: http://nbviewer.jupyter.org/gist/epifanio/e82443b79c24ceb2d59ba49cad9a62d4 (from gitter).
Even if you can use pd.options.display.max_colwidth to set it to a really high number eg 1000, this is only useful if the long text is wrapped over multiple lines, and not on one gigantic line (as you would get with current jupyterlab/notebook master.

[jorisvandenbossche]

In the meantime, my proposal to remove the max-width in jupyter has been accepted, so we can close this issue!

We can still adjust our pd.options.display.max_colwidth default value of 50 if people like the less wide default look of the tables. (cc @TomAugspurger)

[jorisvandenbossche]

Reopening this because there are some other issues we have to think about as well. What I encountered now are the display of MultiIndexes:

Due to the right-alignment instead of left alignment, multi-indexed columns get a bit strange:

Also multi-indexer rows are not ideal because the distinction between the levels is not always clear (the borders are gone, but the shading does not always differ depending on the number of rows in the level).

In this case, that is OK:

But in the following the shading is the same (and certainly when having more rows in one level label, or different number of rows for different labels, it becomes difficult to see the border between the level labels):

[TomAugspurger]

Good catch. Would we be better of vertical-aligning the row MultiIndex? We'll also want to check the interaction with index-level names (I'm getting caught up on things, should have more time to look myself towards the end of the week).

[jorisvandenbossche]

Level names are generally OK I think, see for example:

The question is a bit if there is a general solution that improves this that we can propose to jupyter, or whether we try to solve this on the pandas side with some custom formatting.

[jorisvandenbossche]

For the row multi-index, vertical alignment to the top seems better:

The strange thing is that I see <th rowspan="3" valign="top">A</th> for that row header, so we already included the notion that we want it to align at the top, only that does not seem to work.
-> EDIT: "The valign attribute of <th> is not supported in HTML5. Use CSS instead." So we could replace that with <th style="vertical-align:top"> if we only want to fix it specifically for the multi-index

[joshij1979]

I s there any option to disable the default styling .. basically i want to roll back to previous default settings..