Styles for Pandas Dataframes inspired in Kaggle formatting

df-kaggle-style.css

/* Styles for Pandas Dataframes inspired in Kaggle formatting.
It works on JupyterLab and Jupyter Notebook */

:is(.jp-RenderedHTML, .rendered_html) table {
  background: #fff;
  border: 0;
  border-right: 1px solid hsla(210, 3%, 87%, 0.5);
  color: rgba(0, 0, 0, 0.7);
  display: block;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin: 16px 0 24px;
  overflow: auto;
}
:is(.jp-RenderedHTML, .rendered_html) table td,
:is(.jp-RenderedHTML, .rendered_html) table th {
  padding: 4px 8px;
  vertical-align: middle;
}
:is(.jp-RenderedHTML, .rendered_html) table td:not([align="right"]),
:is(.jp-RenderedHTML, .rendered_html) table th:not([align="right"]) {
  text-align: left;
}
:is(.jp-RenderedHTML, .rendered_html) table th {
  background: hsla(210, 3%, 87%, 0.3);
  border: 1px solid hsla(210, 3%, 87%, 0.8);
  font-weight: 400;
}
:is(.jp-RenderedHTML, .rendered_html) table td {
  border: 1px solid hsla(210, 3%, 87%, 0.5);
}
:is(.jp-RenderedHTML, .rendered_html) table tr,
:is(.jp-RenderedHTML, .rendered_html) table tr:nth-child(odd):not(:hover) {
  background: #fff;
}
:is(.jp-RenderedHTML, .rendered_html) table + p {
  color: rgba(0, 0, 0, 0.4);
  margin-top: -16px;
}
.jp-RenderedHTMLCommon tbody tr:nth-child(even):not(:hover) {
  background: content-box;
}

Style example:

Load it from url:

# Custom style for DataFrames
from IPython.display import HTML
from urllib.request import urlopen
css = urlopen('https://bit.ly/3nrfqhx').read().decode('utf-8')
HTML(f'<style>{css}</style>')

Load it from local file:

# Custom style for DataFrames
from IPython.display import HTML
from pathlib import Path
css = Path('df-kaggle-style.css').read_text()
HTML(f'<style>{css}</style>')