COMPAT: HTML styling for MI and notebook 5.0

[TomAugspurger]

Fixes the visual styling of MI labels in notebook 5.0

Small summary:

• No change to regular non-MI tables
• top-align the row-labels in a MultiIndex
• left-align the column-labels in a MultiIndex

Closes #15379

[TomAugspurger]

Master:

PR:

Anything I missed? I'm not sure the best way to handle the odd shading on some MultiIndexes yet...

[codecov]

Codecov Report

Merging #16080 into master will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master   #16080      +/-   ##
==========================================
+ Coverage   90.82%   90.82%   +<.01%     
==========================================
  Files         159      159              
  Lines       50791    50797       +6     
==========================================
+ Hits        46132    46138       +6     
  Misses       4659     4659

Flag	Coverage Δ
#multiple	88.6% <100%> (ø)	⬆️
#single	40.36% <33.33%> (-0.01%)	⬇️

Impacted Files	Coverage Δ
pandas/io/formats/format.py	95.04% <100%> (+0.02%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ff00b55...2490f4a. Read the comment docs.

[jorisvandenbossche]

@TomAugspurger thanks!

My main concern is that it may look a bit strange in certain cases if the header is left aligned and the values right-aligned (the example you show has consistent width columns, but that is not always the case)

[jorisvandenbossche]

Small example:

But probably not much to do about that, unless we left-align the full columns as well

[TomAugspurger]

My main concern is that it may look a bit strange in certain cases if the header is left aligned

Yeah, that's unfortunate. I think that's worth the tradeoff for now though. I wasn't able to easily get any nice-looking vertical borders on just the columns of the MI that needed it. And I don't want to put in too much work, as ideally this code will be getting ripped out at some point (there's some IPython 2.x compatibility code in there 😆 ), but don't have time for that now.

[jorisvandenbossche]

Yes, this is certainly already much better!
The other (easy) option is just to also left-align all values (as it was before I think?), but not sure if that is worth it.

[TomAugspurger]

The other (easy) option is just to also left-align all values (as it was before I think?), but not sure if that is worth it.

Are you thinking to left-align always, or left-align only if there's a MI in the columns?

I think there's no way to control the table body alignment based on the number of rows in the MultiIndex. I was only able to retain the default right-alignment for non-MI by using the only-child pseudo-selector. But this could only affect the column headers.

I think I prefer the right-alignment in general, so it'd be a pity to lose that.

[jorisvandenbossche]

I think there's no way to control the table body alignment based on the number of rows in the MultiIndex.

Ah, yes, I was thinking: but we control the generation, so we can just change the style tag based on whether we are displaying a multi-index header or not. But of course, css doesn't work that way as it would change all tables in the notebook (unless we start adding unique identifiers as in .style)

I think I prefer the right-alignment in general, so it'd be a pity to lose that.

OK, then let's leave it as is? we can always further refine later on if there comes feedback!

[margotphoenix]

I think the code that was added here didn't just affect multiindex tables, but all tables. As a result, tables with long string values look awkward, with the row indices vertically top-aligned and values vertically middle-aligned.

I have tried to fix this using custom css, but the css produced from this code overrides anything I try.

[TomAugspurger]

@maxwasserman can you post what version version of the notebook you're using, and show before / after screenshots? Perhaps open a new issue so we can track it there.

[margotphoenix]

I had just upgraded from pandas 0.19.2 to 0.20.2 over the weekend, then upgraded from notebook 4.1.0 to 5.0.0 yesterday. Python version is 2.7.13.

With pandas 0.19.2 and notebook 4.1.0 (Before Upgrading):

With pandas 0.20.2 and notebook 4.1.0 (After Upgrading Pandas):

With pandas 0.20.2 and notebook 5.0.0 (After Upgrading Both):

The change in alignment for row indices and column names happened when I upgraded pandas.