environment

Mac, local

I picked up a fashionable style sheet and wondered if it could be applied as it is, but it didn't work.

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

why? With the structure assumed by this style sheet (for example, the figure below)

This is because it is different from the structure spit out by pd.DataFrame.to_html ()

To the structure that is spit out by to_html () and the place that can be displayed like Jupyter

It was very easy to understand. Since all of them are written here, I will omit the code posting etc. https://stackoverflow.com/questions/50807744/apply-css-class-to-pandas-dataframe-using-to-html

By the way, even though I changed the style sheet, it is not reflected? If you think 127.0.0.1:5000/static/style.css If you load it several times until you can see the change and then access it, it may be reflected.

Refer to the above, rewrite css and make it a little fashionable

I did my best to make it look like this

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;}

I don't really understand style sheets. I think there is a lot of waste

Getting Started with Flask # 2: Displaying Data Frames in Style Sheets

environment

I picked up a fashionable style sheet and wondered if it could be applied as it is, but it didn't work.

To the structure that is spit out by to_html () and the place that can be displayed like Jupyter

Refer to the above, rewrite css and make it a little fashionable