Replicating Jupyter Notebook Pandas dataframe HTML printout
I've made a few changes to your code to get the functionality you want:
- Pandas dataframes are styled with two special HTML tags for tables, namely
thead
for the header andtbody
for the body. We can use this to specify the highlighting behavior as body-only - CSS has "even" and "odd" properties which you can use to add shading effects to tables.
- In order for hover to work with the background shading specified, it must be called last not first
In Jupyter Notebook:
import pandas as pd
import numpy as np
from IPython.display import HTML
def hover(hover_color="#add8e6"):
return dict(selector="tbody tr:hover",
props=[("background-color", "%s" % hover_color)])
styles = [
#table properties
dict(selector=" ",
props=[("margin","0"),
("font-family",'"Helvetica", "Arial", sans-serif'),
("border-collapse", "collapse"),
("border","none"),
("border", "2px solid #ccf")
]),
#header color - optional
dict(selector="thead",
props=[("background-color","#cc8484")
]),
#background shading
dict(selector="tbody tr:nth-child(even)",
props=[("background-color", "#fff")]),
dict(selector="tbody tr:nth-child(odd)",
props=[("background-color", "#eee")]),
#cell spacing
dict(selector="td",
props=[("padding", ".5em")]),
#header cell properties
dict(selector="th",
props=[("font-size", "125%"),
("text-align", "center")]),
#caption placement
dict(selector="caption",
props=[("caption-side", "bottom")]),
#render hover last to override background-color
hover()
]
html = (df.style.set_table_styles(styles)
.set_caption("Hover to highlight."))
html
...but is it still beautiful when we output the HTML file?? Yes. You can do some more CSS styling to get it just right (font-size, font-family, text-decoration, margin/padding, etc) but this gives you a start. See below:
print(html.render())
<style type="text/css" >
#T_3e73cfd2_396c_11e8_9d70_240a645b34fc {
margin: 0;
font-family: "Helvetica", "Arial", sans-serif;
border-collapse: collapse;
border: none;
border: 2px solid #ccf;
} #T_3e73cfd2_396c_11e8_9d70_240a645b34fc thead {
background-color: #cc8484;
} #T_3e73cfd2_396c_11e8_9d70_240a645b34fc tbody tr:nth-child(even) {
background-color: #fff;
} #T_3e73cfd2_396c_11e8_9d70_240a645b34fc tbody tr:nth-child(odd) {
background-color: #eee;
} #T_3e73cfd2_396c_11e8_9d70_240a645b34fc td {
padding: .5em;
} #T_3e73cfd2_396c_11e8_9d70_240a645b34fc th {
font-size: 125%;
text-align: center;
} #T_3e73cfd2_396c_11e8_9d70_240a645b34fc caption {
caption-side: bottom;
} #T_3e73cfd2_396c_11e8_9d70_240a645b34fc tbody tr:hover {
background-color: #add8e6;
}</style>
<table id="T_3e73cfd2_396c_11e8_9d70_240a645b34fc" ><caption>Hover to highlight.</caption>
<thead> <tr>
<th class="blank" ></th>
<th class="blank level0" ></th>
<th class="col_heading level0 col0" >0</th>
</tr> <tr>
<th class="index_name level0" >first</th>
<th class="index_name level1" >second</th>
<th class="blank" ></th>
</tr></thead>
<tbody> <tr>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row0" class="row_heading level0 row0" rowspan=2>bar</th>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row0" class="row_heading level1 row0" >one</th>
<td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow0_col0" class="data row0 col0" >-0.130634</td>
</tr> <tr>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row1" class="row_heading level1 row1" >two</th>
<td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow1_col0" class="data row1 col0" >1.17685</td>
</tr> <tr>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row2" class="row_heading level0 row2" rowspan=2>baz</th>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row2" class="row_heading level1 row2" >one</th>
<td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow2_col0" class="data row2 col0" >0.500367</td>
</tr> <tr>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row3" class="row_heading level1 row3" >two</th>
<td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow3_col0" class="data row3 col0" >0.555932</td>
</tr> <tr>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row4" class="row_heading level0 row4" rowspan=2>foo</th>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row4" class="row_heading level1 row4" >one</th>
<td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow4_col0" class="data row4 col0" >-0.744553</td>
</tr> <tr>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row5" class="row_heading level1 row5" >two</th>
<td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow5_col0" class="data row5 col0" >-1.41269</td>
</tr> <tr>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel0_row6" class="row_heading level0 row6" rowspan=2>qux</th>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row6" class="row_heading level1 row6" >one</th>
<td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow6_col0" class="data row6 col0" >0.726728</td>
</tr> <tr>
<th id="T_3e73cfd2_396c_11e8_9d70_240a645b34fclevel1_row7" class="row_heading level1 row7" >two</th>
<td id="T_3e73cfd2_396c_11e8_9d70_240a645b34fcrow7_col0" class="data row7 col0" >-0.683555</td>
</tr></tbody>
</table>