環境
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
from flask import Flask,render_template,url_for
import seaborn as sns
app = Flask(__name__)
@app.route('/')
def index():
df = sns.load_dataset('iris')
return render_template('index.html',
table=(df
.head(15)
.to_html(classes="mystyle"))
)
if __name__ == "__main__":
app.run()
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mystyle</title>
<link rel="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: 0px solid;
border-left: 0px solid;
border-right: 0px solid;
border-bottom: 0px solid;
}
.mystyle th, td {
border-spacing: 0px;
padding: 5px;
border-top: 1px solid #f1f8fe;
border-bottom: 1px solid #cbd2d8;
border-right: 1px solid #cbd2d8;
margin: 0px;
}
.mystyle thead, th:first-child {
background-color: #90b4d6;
text-shadow: -1px -1px 1px #666666;
}
.mystyle thead th{
color:white;
text-align: center;
border-bottom: 2px solid #547ca0;
letter-spacing: 0.15em;
}
.mystyle th:first-child {
color:white;
text-align: right;
}
.mystyle td {
text-align: right;
}
.mystyle tr:nth-child(even) {
background: #E0E0E0;
}
.mystyle thead tr th:first-child {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;}
.mystyle thead tr th:last-child {
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;}
※style sheetはあんまり理解してない。無駄が多いと思う