Umgebung

Mac, lokal

Ich nahm ein modisches Stylesheet und fragte mich, ob es so angewendet werden könnte, wie es ist, aber es funktionierte nicht.

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

Warum? Mit der von diesem Stylesheet angenommenen Struktur (z. B. die folgende Abbildung)

Dies liegt daran, dass es sich von der Struktur unterscheidet, die von pd.DataFrame.to_html () ausgespuckt wurde.

Zu der Struktur, die von to_html () ausgespuckt wird, und dem Punkt, an dem sie wie Jupyter angezeigt werden kann

Es war sehr leicht zu verstehen. Da alle hier geschrieben sind, werde ich die Code-Veröffentlichung usw. weglassen. https://stackoverflow.com/questions/50807744/apply-css-class-to-pandas-dataframe-using-to-html

Übrigens, obwohl ich das Stylesheet geändert habe, wird es nicht wiedergegeben? Wenn du denkst 127.0.0.1:5000/static/style.css Wenn Sie es mehrmals laden, bis Sie die Änderung sehen und dann darauf zugreifen können, wird es möglicherweise wiedergegeben.

Beziehen Sie sich auf das Obige, schreiben Sie CSS neu, um es ein wenig modisch zu machen

Ich habe mein Bestes getan, damit es so aussieht

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

Ich verstehe das Stylesheet nicht sehr gut. Ich denke, es gibt viel Abfall

[PYTHON] Einführung in Flask Part 2: Anzeigen von Datenrahmen in Stylesheets

Umgebung

Ich nahm ein modisches Stylesheet und fragte mich, ob es so angewendet werden könnte, wie es ist, aber es funktionierte nicht.

Zu der Struktur, die von to_html () ausgespuckt wird, und dem Punkt, an dem sie wie Jupyter angezeigt werden kann

Beziehen Sie sich auf das Obige, schreiben Sie CSS neu, um es ein wenig modisch zu machen