BUG: Fix css for displaying DataFrames in notebook #16792

doc/source/whatsnew/v0.21.0.txt

@@ -160,6 +160,7 @@ I/O
 ^^^
 
 - Bug in :func:`read_csv` in which non integer values for the header argument generated an unhelpful / unrelated error message (:issue:`16338`)
+- Bug in ``DataFrame.to_html()`` with ``notebook=True`` where DataFrames with named indexes or non-MultiIndex indexes had undesired horizontal or vertical alignment for column or row labels, respectively (:issue:`16792`) 
 
 
 Plotting

pandas/io/formats/format.py

@@ -1118,20 +1118,39 @@ def write_tr(self, line, indent=0, indent_delta=4, header=False,
         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>""")
+        template_first = """\
+            <style scoped>"""
+        template_last = """\
+            </style>"""
+        template_select = """\
+                .dataframe %s {
+                    %s: %s;
+                }"""
+        element_props = [('tbody tr th:only-of-type',
+                          'vertical-align',
+                          'middle'),
+                         ('tbody tr th',
+                          'vertical-align',
+                          'top')]
+        if isinstance(self.columns, MultiIndex):
+            element_props.append(('thead tr th',
+                                  'text-align',
+                                  'left'))
+            if all((self.fmt.has_index_names,
+                    self.fmt.index,
+                    self.fmt.show_index_names)):
+                element_props.append(('thead tr:last-of-type th',
+                                      'text-align',
+                                      'right'))
+        else:
+            element_props.append(('thead th',
+                                  'text-align',
+                                  'right'))
+        template_mid = '\n\n'.join(map(lambda t: template_select % t,
+                                       element_props))
+        template = dedent('\n'.join((template_first,
+                                     template_mid,
+                                     template_last)))
         if self.notebook:
             self.write(template)
 

pandas/tests/io/formats/test_to_html.py

@@ -1863,12 +1863,12 @@ def test_to_html_no_index_max_rows(self):
     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
+        assert "tbody tr th:only-of-type" 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
+        assert "tbody tr th:only-of-type" not in result
 
     def test_to_html_with_index_names_false(self):
         # gh-16493