Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML table styling in notebook has awkward alignment when text wraps or when index is named #16792

Closed
margotphoenix opened this issue Jun 28, 2017 · 4 comments · Fixed by #16879
Closed

HTML table styling in notebook has awkward alignment when text wraps or when index is named #16792

margotphoenix opened this issue Jun 28, 2017 · 4 comments · Fixed by #16879
Labels
IO HTML read_html, to_html, Styler.apply, Styler.applymap Output-Formatting __repr__ of pandas objects, to_string
Milestone
0.21.0

Comments

@margotphoenix
Copy link
Contributor

margotphoenix commented Jun 28, 2017 •
edited
Loading

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)

screen shot 2017-06-28 at 1 58 50 pm

Better Output (Row Indices Middle-aligned)

screen shot 2017-06-28 at 1 59 44 pm

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

screen shot 2017-06-30 at 2 43 49 pm

Better Output

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

screen shot 2017-06-30 at 2 47 28 pm
@TomAugspurger
Copy link
Contributor

I think this issue is this selector, which should only apply when where are multiple levels to the index (a MultiIndex)

I'm not sure how to express this in CSS, so if anyone knows more please chime in. I suppose we could maybe do something like (untested)

# Always vertical align, for MultiIndex...

.dataframe tbody tr th {
    vertical-align: top;
}

# but override for single
.dataframe tbody tr th:only-child {
    vertical-align: middle;
}

@TomAugspurger TomAugspurger added this to the Next Major Release milestone Jun 28, 2017
@TomAugspurger TomAugspurger added Difficulty Novice IO HTML read_html, to_html, Styler.apply, Styler.applymap Output-Formatting __repr__ of pandas objects, to_string labels Jun 28, 2017
@jorisvandenbossche
Copy link
Member

@maxwasserman Thanks for opening this! I also just noted it some days ago with a notebook with a lot of cell content.

If we want to fix this by adding a different css to the frame's output depending on whether it has a multi-index or not, then every frame needs to get an unique id?

@jorisvandenbossche
Copy link
Member

Did a small test, and this seems to do the trick:

<style>
    .dataframe thead tr:only-child th {
        text-align: right;
    }
    .dataframe thead th {
        text-align: left;
    }
    
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }
    .dataframe tbody tr th {
        vertical-align: top;
    }
</style

@maxwasserman Would you like to do a PR?

The difference with Tom's snippet is that I use only-of-type instead of only-child, since for a row, the header cell (so index label) is not the only child in that row, but the only child of type th

@margotphoenix margotphoenix changed the title HTML table styling in notebook has awkward alignment when value cells have wrapping text HTML table styling in notebook has awkward alignment when text wraps or when index is named Jun 30, 2017
@margotphoenix
Copy link
Contributor Author

I edited the original issue report with a new visual issue I just found. It looks like the css selectors as they are also have the unintended effect of formatting a DataFrame with a named index as if it had Multiindex columns.

@jorisvandenbossche I'll try to start one this weekend.

@margotphoenix margotphoenix mentioned this issue Jul 10, 2017
Merged
4 tasks
@jorisvandenbossche jorisvandenbossche modified the milestones: 0.21.0, Next Major Release Sep 12, 2017
jorisvandenbossche pushed a commit that referenced this issue Sep 22, 2017
@jorisvandenbossche
BUG: Fix css for displaying DataFrames in notebook #16792 (#16879)
dfb6c48
alanbato pushed a commit to alanbato/pandas that referenced this issue Nov 10, 2017
@alanbato
BUG: Fix css for displaying DataFrames in notebook pandas-dev#16792 (p…
d941a0b 
…andas-dev#16879)
No-Stream pushed a commit to No-Stream/pandas that referenced this issue Nov 28, 2017
@No-Stream
BUG: Fix css for displaying DataFrames in notebook pandas-dev#16792 (p…
967c48a 
…andas-dev#16879)
@ChengYen-Tang ChengYen-Tang mentioned this issue Oct 11, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
IO HTML read_html, to_html, Styler.apply, Styler.applymap Output-Formatting __repr__ of pandas objects, to_string
Projects
None yet
Milestone
0.21.0
Development

Successfully merging a pull request may close this issue.

BUG: Fix css for displaying DataFrames in notebook #16792
3 participants
@jorisvandenbossche @TomAugspurger @margotphoenix