環境
Mac、ローカル
おしゃれなスタイルシートを拾ってきてそのまま適用できないかと目論んだが、だめだった
http://www.htmlandcssbook.com/extras/table-styles/
なぜか?このスタイルシートが想定している構造(例えば下図)と
pd.DataFrame.to_html()で吐き出される構造とは違うからでる
to_html()で吐き出される構造とJupyterっぽく表示できるところまで
非常に分かりやすいのがあった。まじでここに全部書いてあるのでコード掲載等は割愛
https://stackoverflow.com/questions/50807744/apply-css-class-to-pandas-dataframe-using-to-html
ちなみにスタイルシートを変更したのに反映されてないぞ?と思ったら
127.0.0.1:5000/static/style.css
変更が確認できるまで何度か読み込んでからアクセスすると、反映される場合がある
上記参考に、cssを書き換えてちょいおしゃれにする
app.py
fromflaskimportFlask,render_template,url_forimportseabornassnsapp=Flask(__name__)@app.route('/')defindex():df=sns.load_dataset('iris')returnrender_template('index.html',table=(df.head(15).to_html(classes="mystyle")))if__name__=="__main__":app.run()
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>mystyle</title><linkrel="stylesheet"type="text/css"href="{{url_for('static', filename='style.css')}}"><style type="text/css">body{font-family:Arial,Verdana,sans-serif;font-size:90%;color:#666;background-color:#f8f8f8;}</style></head><body><h1>iris data table</h1>
{{table | safe}}
</body></html>
style.css
mystyle{border-spacing:0px;border-top:0pxsolid;border-left:0pxsolid;border-right:0pxsolid;border-bottom:0pxsolid;}.mystyleth,td{border-spacing:0px;padding:5px;border-top:1pxsolid#f1f8fe;border-bottom:1pxsolid#cbd2d8;border-right:1pxsolid#cbd2d8;margin:0px;}.mystylethead,th:first-child{background-color:#90b4d6;text-shadow:-1px-1px1px#666666;}.mystyletheadth{color:white;text-align:center;border-bottom:2pxsolid#547ca0;letter-spacing:0.15em;}.mystyleth:first-child{color:white;text-align:right;}.mystyletd{text-align:right;}.mystyletr:nth-child(even){background:#E0E0E0;}.mystyletheadtrth:first-child{-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;}.mystyletheadtrth:last-child{-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;}
※style sheetはあんまり理解してない。無駄が多いと思う