Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8664

flask入門その2:データフレームをスタイルシートで見栄えよく表示

$
0
0

環境

Mac、ローカル

おしゃれなスタイルシートを拾ってきてそのまま適用できないかと目論んだが、だめだった

http://www.htmlandcssbook.com/extras/table-styles/
image.png

なぜか?このスタイルシートが想定している構造(例えば下図)と
image.png

pd.DataFrame.to_html()で吐き出される構造とは違うからでる

to_html()で吐き出される構造とJupyterっぽく表示できるところまで

非常に分かりやすいのがあった。まじでここに全部書いてあるのでコード掲載等は割愛
https://stackoverflow.com/questions/50807744/apply-css-class-to-pandas-dataframe-using-to-html
image.png

ちなみにスタイルシートを変更したのに反映されてないぞ?と思ったら
127.0.0.1:5000/static/style.css
変更が確認できるまで何度か読み込んでからアクセスすると、反映される場合がある

上記参考に、cssを書き換えてちょいおしゃれにする

頑張ってこんな感じにした
image.png

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はあんまり理解してない。無駄が多いと思う


Viewing all articles
Browse latest Browse all 8664

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>