COMPAT: HTML styling for MI and notebook 5.0 (#16080)

Fixes the visual styling of MI labels in notebook 5.0

- No change to non-MI dataframes
- Left-align MI columns
- Top-align MI row labels

doc/source/whatsnew/v0.20.0.txt

@@ -540,7 +540,7 @@ Other Enhancements
 - HTML table output skips ``colspan`` or ``rowspan`` attribute if equal to 1. (:issue:`15403`)
 - ``pd.io.api.Styler`` template now has blocks for easier extension, :ref:`see the example notebook <style.ipynb#Subclassing>` (:issue:`15649`)
 - ``pd.io.api.Styler.render`` now accepts ``**kwargs`` to allow user-defined variables in the template (:issue:`15649`)
-
+- Compatability with Jupyter notebook 5.0; MultiIndex column labels are left-aligned and MultiIndex row-labels are top-aligned (:issue:`15379`)
 
 - ``TimedeltaIndex`` now has a custom datetick formatter specifically designed for nanosecond level precision (:issue:`8711`)
 - ``pd.api.types.union_categoricals`` gained the ``ignore_ordered`` argument to allow ignoring the ordered attribute of unioned categoricals (:issue:`13410`). See the :ref:`categorical union docs <categorical.union>` for more information.

pandas/io/formats/format.py

@@ -9,6 +9,7 @@
 # pylint: disable=W0141
 
 import sys
+from textwrap import dedent
 
 from pandas.core.dtypes.missing import isnull, notnull
 from pandas.core.dtypes.common import (
@@ -1107,6 +1108,24 @@ def write_tr(self, line, indent=0, indent_delta=4, header=False,
         indent -= indent_delta
         self.write('</tr>', indent)
 
+    def write_style(self):
+        template = dedent("""\
+            <style>
+                .dataframe thead tr:only-child th {
+                    text-align: right;
+                }
+
+                .dataframe thead th {
+                    text-align: left;
+                }
+
+                .dataframe tbody tr th {
+                    vertical-align: top;
+                }
+            </style>""")
+        if self.notebook:
+            self.write(template)
+
     def write_result(self, buf):
         indent = 0
         frame = self.frame
@@ -1131,6 +1150,7 @@ def write_result(self, buf):
 
             self.write('<div{0}>'.format(div_style))
 
+        self.write_style()
         self.write('<table border="%s" class="%s">' % (self.border,
                                                        ' '.join(_classes)),
                    indent)

pandas/tests/io/formats/test_to_html.py

@@ -1859,3 +1859,13 @@ def test_to_html_no_index_max_rows(self):
           </tbody>
         </table>""")
         self.assertEqual(result, expected)
+
+    def test_to_html_notebook_has_style(self):
+        df = pd.DataFrame({"A": [1, 2, 3]})
+        result = df.to_html(notebook=True)
+        assert "thead tr:only-child" in result
+
+    def test_to_html_notebook_has_no_style(self):
+        df = pd.DataFrame({"A": [1, 2, 3]})
+        result = df.to_html()
+        assert "thead tr:only-child" not in result