3

I have a dataframe produced by this code:

hmdf = pd.DataFrame(hm01)
new_hm02 = hmdf[['FinancialYear','Month']]
new_hm01 = hmdf[['FinancialYear','Month','FirstReceivedDate']]

hm05 = new_hm01.pivot_table(index=['FinancialYear','Month'], aggfunc='count')
vals1 = ['April    ', 'May      ', 'June     ', 'July     ', 'August   ', 'September', 'October  ', 'November ', 'December ', 'January  ', 'February ', 'March    ']

df_hm = new_hm01.groupby(['Month', 'FinancialYear']).size().unstack(fill_value=0).rename(columns=lambda x: '{}'.format(x))
df_hml = df_hm.reindex(vals1)

I am stylising it with the following code which highlights a row when interacted with. However I want it to highlight the columns rather than the rows

Function:

def hover(hover_color="#F1C40F"):
    return dict(selector="tr:hover",
                props=[("background-color", "%s" % hover_color)])

Style code:

styles3 = [
    hover(),
    dict(selector="th", props=[("font-size", "80%"),
                               ("font-family", "Gill Sans MT"),
                               ("color",'white'),
                               ('background-color', 'rgb(11, 48, 79)'),
                               ("text-align", "center")]),
    dict(selector="td", props=[("font-size", "75%"),
                               ("font-family", "Gill Sans MT"),
                               ("text-align", "center")]),
    dict(selector="tr", props=[("line-height", "11px")]),
    dict(selector="caption", props=[("caption-side", "bottom")])
]



html3 = (dfPercent.style.set_table_styles(styles3)
            .set_caption(""))           

html3

Output:

enter image description here

Does anyone know what I need to do to make it highlight columns instead of rows? I have tried changing "tr:hover" to "td:hover" etc, but it doesnt work the way I want

Nicholas
  • 3,517
  • 13
  • 47
  • 86
  • 1
    Really hard. I try implemented [this](https://stackoverflow.com/questions/1553571/html-hover-table-column?noredirect=1&lq=1), but seems `jupyter` (or styler) is buggy with this crazy pseudoelements (`td:hover::after`) – jezrael Aug 10 '17 at 15:13
  • Hey again :)... thank you very much for trying. I will leave it then and will think of a different way visualising the table. Its good to know for the future so I don't waste as much time as I have done today trying to get it to work, ha! – Nicholas Aug 10 '17 at 15:45
  • Im trying doing the same. The obstacle is that CSS can not select all the column cells using `:hover` . – WeiChing 林煒清 Aug 23 '20 at 06:23

0 Answers0