【发布时间】：2018-08-25 17:55:10
【问题描述】：
我正在尝试将 jupyter 在其笔记本中用于 pandas 数据框的输出复制到 html/css/js，以便 Flask jsonify 可以将其作为 html 返回，以便我稍后在 AJAX 调用中使用。
我找到了 this 和 this，它们建议使用 pandas 内置样式功能而不是 CSS hack，但我正在努力获得所需的功能：
def hover(hover_color="#add8e6"):
return dict(selector="tr:hover",
props=[("background-color", "%s" % hover_color)])
styles = [
hover(),
dict(selector="th", props=[("font-size", "125%"),
("text-align", "center"),
("padding", "5px 5px")]),
dict(selector="tr", props=[("text-align", "center")]),
dict(selector="caption", props=[("caption-side", "bottom")])
]
# creating some dummy data
index = pd.MultiIndex(levels=[['bar', 'baz', 'foo', 'qux'], ['one', 'two']],
labels=[[0, 0, 1, 1, 2, 2, 3, 3], [0, 1, 0, 1, 0, 1, 0, 1]],
names=['first', 'second'])
df = pd.DataFrame(data=np.random.randn(8), index=index)
# you'll see the html rendered bellow
df.style.set_table_styles(styles).set_caption("test").render()
与 jupyter 笔记本相比，这缺少一些默认的背景颜色剥离，并且标题不应应用悬停类。我能想到在选择元素上应用某些东西的唯一方法是添加class= 或id=，但样式功能隐藏了所有这些。
<style type="text/css" > #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 tr:hover { background-color: #add8e6; } #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 th { font-size: 150%; text-align: center; } #T_479b61ba_292a_11e8_86bf_0ee09a5428a2 caption { caption-side: bottom; }</style> <table id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2" ><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_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row0" class="row_heading level0 row0" rowspan=2>bar</th> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row0" class="row_heading level1 row0" >one</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row0_col0" class="data row0 col0" >-0.0690895</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row1" class="row_heading level1 row1" >two</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row1_col0" class="data row1 col0" >-0.518092</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row2" class="row_heading level0 row2" rowspan=2>baz</th> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row2" class="row_heading level1 row2" >one</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row2_col0" class="data row2 col0" >-0.163842</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row3" class="row_heading level1 row3" >two</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row3_col0" class="data row3 col0" >-0.144757</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row4" class="row_heading level0 row4" rowspan=2>foo</th> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row4" class="row_heading level1 row4" >one</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row4_col0" class="data row4 col0" >1.22865</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row5" class="row_heading level1 row5" >two</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row5_col0" class="data row5 col0" >1.83947</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level0_row6" class="row_heading level0 row6" rowspan=2>qux</th> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row6" class="row_heading level1 row6" >one</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row6_col0" class="data row6 col0" >0.793328</td> </tr> <tr> <th id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2level1_row7" class="row_heading level1 row7" >two</th> <td id="T_479b61ba_292a_11e8_86bf_0ee09a5428a2row7_col0" class="data row7 col0" >-0.723836</td> </tr></tbody> </table> 【问题讨论】：
标签： python css pandas jupyter-notebook