COMPAT: HTML styling for MI and notebook 5.0
State: closed

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 

Labels:
name: Output-Formatting
description: __repr__ of pandas objects, to_string
name: IO HTML
description: read_html, to_html, Styler.apply, Styler.applymap

Comments:
Master:

![screen shot 2017-04-20 at 9 41 53 pm](https://cloud.githubusercontent.com/assets/1312546/25260854/68da2196-2614-11e7-803d-d97dedcd8d8a.png)

PR:

![screen shot 2017-04-20 at 9 41 59 pm](https://cloud.githubusercontent.com/assets/1312546/25260855/6a4ace0e-2614-11e7-87d4-120f6a9e5af0.png)

Anything I missed? I'm not sure the best way to handle the odd shading on some MultiIndexes yet...
# [Codecov](https://codecov.io/gh/pandas-dev/pandas/pull/16080?src=pr&el=h1) Report
> Merging [#16080](https://codecov.io/gh/pandas-dev/pandas/pull/16080?src=pr&el=desc) into [master](https://codecov.io/gh/pandas-dev/pandas/commit/ff00b55de28ed12fc37ebeabfc2a748821542227?src=pr&el=desc) will **increase** coverage by `<.01%`.
> The diff coverage is `100%`.

[![Impacted file tree graph](https://codecov.io/gh/pandas-dev/pandas/pull/16080/graphs/tree.svg?height=150&width=650&token=eZ4WkYLtcO&src=pr)](https://codecov.io/gh/pandas-dev/pandas/pull/16080?src=pr&el=tree)

```diff
@@            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%> (ø)` | :arrow_up: |
| #single | `40.36% <33.33%> (-0.01%)` | :arrow_down: |

| [Impacted Files](https://codecov.io/gh/pandas-dev/pandas/pull/16080?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [pandas/io/formats/format.py](https://codecov.io/gh/pandas-dev/pandas/pull/16080?src=pr&el=tree#diff-cGFuZGFzL2lvL2Zvcm1hdHMvZm9ybWF0LnB5) | `95.04% <100%> (+0.02%)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/pandas-dev/pandas/pull/16080?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/pandas-dev/pandas/pull/16080?src=pr&el=footer). Last update [ff00b55...2490f4a](https://codecov.io/gh/pandas-dev/pandas/pull/16080?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).

@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)
Small example:

![screenshot from 2017-04-21 09-48-43](https://cloud.githubusercontent.com/assets/1020496/25268106/c0a2472e-2677-11e7-9587-faa2b2aba524.png)

But probably not much to do about that, unless we left-align the full columns as well
> 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.
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.
> 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.
> 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!
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.

<img width="906" alt="screen shot 2017-06-27 at 9 47 48 pm" src="https://user-images.githubusercontent.com/5471483/27617113-4bc55c58-5b82-11e7-8b3f-54f74b9c00d6.png">

I have tried to fix this using custom css, but the css produced from this code overrides anything I try.
@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.
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):
<img width="889" alt="screen shot 2017-06-28 at 10 46 37 am" src="https://user-images.githubusercontent.com/5471483/27650261-633b72fc-5c02-11e7-904a-a14591355eb2.png">

With pandas 0.20.2 and notebook 4.1.0 (After Upgrading Pandas):
<img width="894" alt="screen shot 2017-06-28 at 1 08 54 pm" src="https://user-images.githubusercontent.com/5471483/27650440-fd19093e-5c02-11e7-9e49-98e1dc40cb41.png">

With pandas 0.20.2 and notebook 5.0.0 (After Upgrading Both):
<img width="888" alt="screen shot 2017-06-28 at 1 13 19 pm" src="https://user-images.githubusercontent.com/5471483/27650732-d06c118c-5c03-11e7-8d82-500102ade981.png">

The change in alignment for row indices and column names happened when I upgraded pandas.