Edit table programmatically to fit content

Question

It's possible to create HTML page from a CSV file, with the following:

import pandas as pd

df = pd.read_csv('../data.csv',delimiter=';', engine='python')
df.to_html('csv.html')

Column width of this table seems to respect the header (column title) size but for some columns content is larger then the column title and gets wrapped to next line. This happens with the following CSV, for the multi-word cells (aaaaaaaaa aaaaaaaaa):

Name1;Name2;Name3;Name4;Name5
1;aaaaaaaaa aaaaaaaaa;b;aaaaaaaaa aaaaaaaaa;aaaaaaaaa aaaaaaaaa
2;aaaaaaaaa aaaaaaaaa;b;aaaaaaaaa aaaaaaaaa;aaaaaaaaa aaaaaaaaa
3;aaaaaaaaa aaaaaaaaa;b;aaaaaaaaa aaaaaaaaa;aaaaaaaaa aaaaaaaaa

I would like to make columns width large enough to fit content (avoid word wrap). How can I get there programmatically (using Python)?

It seems `td { text-align: center; white-space:nowrap }` does ti. — KcFnMi, Oct 12 '16 at 09:21

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

Answer is based on this.

import pandas as pd

filename = 'csv.html'

df = pd.read_csv('../data.csv',delimiter=';', engine='python')

html_begin = '\
<meta charset="UTF-8">\n\
<html>\n\
<head><link rel="stylesheet" type="text/css" href="csv.css"></head>\n\
<body>\n\n'

html_end = '\n\
</body>\n\
</html>\n'

with open(filename, 'w') as f:   
    f.write(html_begin)
    df.to_html(f)
    f.write(html_end)

And csv.css is like:

table {
    border: .5px solid lightgray;
    border-collapse: collapse;
    width: 100%;
}
th {
    border: .5px solid lightgray;
    text-align: center;
}
td {
    border: .5px solid lightgray;
    text-align: center;
    white-space:nowrap
}

Alternatively (a better alternative I'll say), one can avoid the CSS need and do everything via Pandas Style like:

import pandas as pd

filename = 'csv_style.html'

df = pd.read_csv('../data.csv',delimiter=';', engine='python')

style =  df.style
style.set_properties(**{'text-align': 'center',
                       'white-space': 'nowrap'})

with open(filename, 'w') as f:  
    f.write(style.render())

edited May 23 '17 at 12:33

Community

1
1

answered Oct 12 '16 at 09:40

KcFnMi

5,516
10
62
136

1

you may want to check [Pandas Style formatting](http://pandas.pydata.org/pandas-docs/stable/style.html) in order to do it the Pandas way. [This](http://stackoverflow.com/questions/36897366/pandas-to-html-using-the-style-options-or-custom-css) might be interesting as well... – MaxU - stand with Ukraine Oct 12 '16 at 09:45
Pandas Style is pretty cool! Interestingly it doesn't help with the issue of this question (or I don't know how to use Pandas Style to solve this particular issue). – KcFnMi Oct 12 '16 at 14:40
Question edited to include a CSV exemplifying the issue (you need to shrink the browser window to see word wrapping). – KcFnMi Oct 12 '16 at 17:43
Oops... my fault! Now I see how to replace the CSS need with `style.set_properties(**{'text-align': 'center', 'white-space': 'nowrap'})`. Great job Pandas Style! – KcFnMi Oct 12 '16 at 17:59
so it would make sense to update your answer then... ;) – MaxU - stand with Ukraine Oct 12 '16 at 18:05
It's there, waiting for you to say it's useful, :) – KcFnMi Oct 12 '16 at 18:17

Edit table programmatically to fit content

1 Answers1