HTML table styling in notebook has awkward alignment when text wraps or when index is named · Issue #16792 · pandas-dev/pandas (original) (raw)

Following up on issue #15379 regarding the formatting of Multiindex rows in jupyter notebook, I believe the fix for that issue (pull request #16080) affected the formatting of all dataframes, whether they have a Multiindex or not. The solution in pull request #16080 was to make all row indices top-aligned in cells. This looks fine when the data in the table all stays on one line. However, I have wide dataframes that contain longer-than-average text strings, and the default behavior when displaying the table in notebook is to wrap the text onto another line or lines. When this happens, having the row indices be top-aligned is very awkward-looking because all the data in the table remains vertically middle-aligned.

I have tried to fix this issue using custom css, but it gets overridden every time by the css produced by the code here, which was added in the referenced pull request.

Reproduce

Put the following lines of code into a jupyter notebook:

import pandas as pd df = pd.read_csv('http://www.baseballprospectus.com/standings/index.php?odate=2017-06-27&otype=csv') df.head(8)

Current Output (Row Indices Top-aligned)

Better Output (Row Indices Middle-aligned)

I noticed this issue when upgrading from pandas 0.19.2 to 0.20.2 over the weekend.

pandas 0.20.2
notebook 5.0.0
Python 2.7.13

Full version stuff:

INSTALLED VERSIONS
------------------
commit: None
python: 2.7.13.final.0
python-bits: 64
OS: Darwin
OS-release: 15.6.0
machine: x86_64
processor: i386
byteorder: little
LC_ALL: None
LANG: en_US.UTF-8
LOCALE: None.None

pandas: 0.20.2
pytest: None
pip: 9.0.1
setuptools: 36.0.1
Cython: None
numpy: 1.13.0
scipy: None
xarray: None
IPython: 5.4.1
sphinx: None
patsy: None
dateutil: 2.6.0
pytz: 2017.2
blosc: None
bottleneck: None
tables: None
numexpr: None
feather: None
matplotlib: None
openpyxl: None
xlrd: None
xlwt: None
xlsxwriter: None
lxml: None
bs4: None
html5lib: 0.999999999
sqlalchemy: None
pymysql: None
psycopg2: None
jinja2: 2.9.6
s3fs: None
pandas_gbq: None
pandas_datareader: None

EDIT 6/30/17

I just discovered an additional issue and figured I should add it to this. For cases where the dataframe's index is named, the table header is entirely left-aligned, including the index name, even when the columns are not a Multiindex. All the cells in the body of the table, including the index, remain right-aligned.

Reproduce

Put the following lines of code into a jupyter notebook:

import pandas as pd df = pd.read_csv('http://www.baseballprospectus.com/standings/index.php?odate=2017-06-27&otype=csv') df.set_index('NAME', inplace=True) df.head(7)

Current Output

Table header left-aligned with named index and non-Multiindex columns

Better Output

Table header right-aligned with named index and non-Multiindex columns