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

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/ image.png

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

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 image.png

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 image.png

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

Recommended Posts

Introduction à Flask Partie 2: Affichage des blocs de données dans les feuilles de style
Premiers pas avec Heroku, déploiement de l'application Flask
Principes de base de MongoDB: Premiers pas avec CRUD avec JAVA
Premiers pas avec AWS IoT facilement en Python
Paramètres pour démarrer avec MongoDB avec python
Premiers pas avec Android!
1.1 Premiers pas avec Python
Premiers pas avec apache2
Premiers pas avec Python
Premiers pas avec Django 1
Introduction à l'optimisation
Premiers pas avec Numpy
Premiers pas avec Spark
Premiers pas avec Python
Premiers pas avec Pydantic
Premiers pas avec Jython
Premiers pas avec Django 2
Traduire Premiers pas avec TensorFlow
Introduction aux fonctions Python
Premiers pas avec Go Assembly
Premiers pas avec PKI avec Golang ―― 4
Premiers pas avec Python Django (1)
Premiers pas avec Python Django (4)
Premiers pas avec Python Django (3)
Introduction à Python Django (6)
Premiers pas avec Django avec PyCharm
Premiers pas avec Python Django (5)
Les ingénieurs de données apprennent DevOps en vue de MLOps. ① Prise en main
Premiers pas avec Python responder v2
Introduction à Git (1) Stockage d'historique
Premiers pas avec Sphinx. Générer docstring avec Sphinx
Premiers pas avec les applications Web Python
Premiers pas avec Python pour les classes PHPer
Premiers pas avec Sparse Matrix avec scipy.sparse
Premiers pas avec Julia pour Pythonista
Premiers pas avec Python Bases de Python
Premiers pas avec Cisco Spark REST-API
Commençant par USD sur Windows
Premiers pas avec les algorithmes génétiques Python
Premiers pas avec Python 3.8 sous Windows
Premiers pas avec Python pour les fonctions PHPer
Démarrez avec Python avec Blender
Premiers pas avec CPU Steal Time
paramètres de samba
Paramètres VIM
Paramètres pour démarrer avec MongoDB avec python
Obtenez des données supplémentaires vers LDAP avec python
Premiers pas avec python3 # 1 Apprenez les connaissances de base
Essayez de travailler avec des données binaires en Python
Premiers pas avec Python Web Scraping Practice
Obtenez des données de Cloudant avec le flacon Bluemix
Premiers pas avec Python pour PHPer-Super Basics
Premiers pas avec Python Web Scraping Practice
Premiers pas avec Dynamo de Python boto
Commençons avec TopCoder en Python (version 2020)
Premiers pas avec Lisp pour Pythonista: Supplément