GoogleColabでdisplayにより出力されるpandasのデータフレームのデフォルトスタイル（CSS）を変更

概要

GoogleColab のなかで、IPython.display モジュールで経由で出力されるデータフレーム pandas.DataFrame のデフォルトの見た目（スタイル／CSS）を変更するための方法です。

なお、GoogelChrome で動作確認をしています。

データフレームのスタイルを変更

GoogleColab. のコードセルで下記を実行すると、

import pandas as pd
df = pd.DataFrame([[1, 2, 3],[4, 5, 6],[7, 8, 9]],
                  columns=['Osaka','Tokyo','Aichi'])
display(df)

次のようにHTMLのテーブル要素を使って整形されたデータフレームが出力されます。

このテーブルのスタイル（CSS）をカスタマイズしたい場合は、次のようなコードを挿入します。以降、IPython.display(...) 経由で出力されるデータフレーム（HTMLのテーブル要素）には、コード内で指定したCSSが適用されるようになります。

データフレームの出力に適用されるCSSを変更

import IPython

def set_css_in_cell_output():
  display(IPython.display.HTML('''<style>
  table.dataframe td, table.dataframe th{
    border:1px solid #dadada;
  }
  table.dataframe th{
    font-family: 'Roboto','Noto',sans-serif;
    background: #eeeeee;
    font-weight: bold;
  }
  table.dataframe td{
    background: #ffffff;
  }
  table.dataframe tbody tr:hover th{
    color: #ffffff;
    background-color:#4169e1;
  }
  table.dataframe tr:hover td{
    background-color: #d7eeff;
  }
  </style>'''))

get_ipython().events.register('pre_run_cell', set_css_in_cell_output)

以降、データフレームは次のように出力されます（すべてのテーブル全体に罫線が入って、ヘッダのフォントとマウスオーバーのときの色が変わるようになりました）。

条件付き書式

セル内の数値に応じて色を変えるといった条件付き書式を適用したい場合は DataFrame.style を使用するようです。

• User Guide :: Styling @ pandas.pydata.org

・・・と思ったら、Google Colab. 環境ではうまくいかないらしいです。残念。

• Pandas style doesn't work with Google colab @ stackoverflow

参考資料

• How to import CSS file into Google Colab notebook (Python3) @ stackoverflow