environnement

Mac, local

J'ai pris une feuille de style à la mode et me suis demandé si elle pouvait être appliquée telle quelle, mais cela n'a pas fonctionné.

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

Pourquoi? Avec la structure assumée par cette feuille de style (par exemple, la figure ci-dessous)

C'est parce qu'il est différent de la structure crachée par pd.DataFrame.to_html ()

À la structure qui est crachée par to_html () et au point où elle peut être affichée comme Jupyter

C'était très facile à comprendre. Étant donné que tous sont écrits ici, je vais omettre l'affichage du code, etc. https://stackoverflow.com/questions/50807744/apply-css-class-to-pandas-dataframe-using-to-html

Au fait, même si j'ai changé la feuille de style, cela ne se reflète pas? Si vous pensez 127.0.0.1:5000/static/style.css Si vous le chargez plusieurs fois jusqu'à ce que vous puissiez voir la modification et y accéder, cela peut être reflété.

Reportez-vous à ce qui précède, réécrivez le css pour le rendre un peu à la mode

J'ai fait de mon mieux pour que ça ressemble à ça

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

Je ne comprends pas beaucoup la feuille de style. Je pense qu'il y a beaucoup de gaspillage

Introduction à Flask Partie 2: Affichage des blocs de données dans les feuilles de style

environnement

J'ai pris une feuille de style à la mode et me suis demandé si elle pouvait être appliquée telle quelle, mais cela n'a pas fonctionné.

À la structure qui est crachée par to_html () et au point où elle peut être affichée comme Jupyter

Reportez-vous à ce qui précède, réécrivez le css pour le rendre un peu à la mode