CSS selector for index cells

[kelmouloudi]

While using Jupyter notebooks, I like to change the color of header cells in Pandas dataframes (all index cells, up and left) for more contrast between the indexes and the data itself (especially when I'm dealing with multiple indexes after using .groupby() like in the picture below) :

I used to achieve this using this CSS code :

%%HTML
<style> 
.dataframe th {
background: #3f577c ;
font-family: monospace ;
color: white ;
border: 3px solid white ;
text-align: left !important ; } 
</style>

This worked because every index cell (in all indexes, up and left) used to be represented by a <th> </th> HTML tag.

However, after updating to Pandas version 0.25.1 from version 0.21.x, the CSS stopped working because the HTML changed so only the upper index cells (column names) are wrapped in <th> <th> tags. The left index simply uses <td> </td> tags, just like the data cells (See image below. Note that both Genre and MediaTypeId are indexes):

Was this intentional? I tried using first-child like below but it only worked with dataframes having only 2 indexes (up and left). For the dataframes with more than one index on the left, only the first index is affected :

%%HTML
<style>
.dataframe th, td:first-child {
background: #3f577c ;
font-family: monospace ;
color: white ;
border: 3px solid white ;
text-align: left !important ; }                                             
</style>

Any ideas?

[TomAugspurger]

Can you go through the history and see when / why it was changed?

[kelmouloudi]

I went through all the changelogs from 0.21 to 0.25.1 but didn't find any mention of it.

[simonjayhawkins]

I can confirm that the behaviour for repr_html is incorrect. I think this is due to the default for bold_rows being False for DataFrameFormatter while the default being True for to_html.

will do some tests tomorrow but may be caused by #27991

[kelmouloudi]

Great! Thank you!