我是一位經(jīng)驗豐富的後端工程師，但我是一個基於瀏覽器的 GUI 設(shè)計（HTML、CSS 等）的新手。我需要建立一個儀表板並找到了 Dash。我剛開始研究這些範(fàn)例。
當(dāng)我執(zhí)行範(fàn)例時，我的結(jié)果與文件中顯示的結(jié)果完全不同。文件指出可能存在微小差異，但我的差異一點也不小。例如，對於早期的表格範(fàn)例之一，我的表格沒有邊框、背景顏色等。在我看來，沒有應(yīng)用任何樣式。我想知道我得到的結(jié)果是否符合預(yù)期，或者是否有問題。
這是一個例子。此範(fàn)例來自版面教學(xué)部分的「可重複使用元件」部分。在文件中，第一個表示例如下所示：
但我得到的是這樣的：
範(fàn)例程式碼如下：
# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.
from dash import Dash, html
import pandas as pd
df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8fd78468aa4cb2/usa-agricultural-exports-2011.csv')
def generate_table(dataframe, max_rows=10):
return html.Table([
html.Thead(
html.Tr([html.Th(col) for col in dataframe.columns])
),
html.Tbody([
html.Tr([
html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
]) for i in range(min(len(dataframe), max_rows))
])
])
app = Dash(__name__)
app.layout = html.Div([
html.H4(children='US Agriculture Exports (2011)'),
generate_table(df)
])
if __name__ == '__main__':
app.run_server(debug=True)
我查看了 Chrome 中的開發(fā)人員工具控制臺，沒有看到任何表明 CSS 檔案無法載入等錯誤。我正在 Mac 上的 PyCharm 中工作。我將文字按原樣複製/貼上到空的“app.py”文件中並運(yùn)行該文件。
我的結(jié)果是錯的，還是只是我的期望有缺陷？如果我應(yīng)該獲得更好看的結(jié)果，我可能會錯過什麼？
如果這是我應(yīng)該得到的，我應(yīng)該如何尋找並應(yīng)用一組好的樣式以使我的表格看起來不錯？我是否必須學(xué)習(xí)一次一種設(shè)定的表格樣式，還是有更好的方法？ HTML/CSS 中是否有某種「外掛」概念，用於抓取和插入一組用於特定目的的樣式，例如樣式表？如果是這樣，我應(yīng)該去哪裡尋找這樣的「插件」？我知道前端正在使用 React，但是對這些東西太陌生了，這些知識對我沒有真正的幫助。
TIA 尋求協(xié)助！
1
0
0
我鼓勵您使用Dash Bootstrap 元件輕鬆設(shè)定您的表格樣式，我用這個函式庫重寫你的範(fàn)例，並得到你想要的輸出：
from dash import Dash, html, dcc
import pandas as pd
import dash_bootstrap_components as dbc
app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8f-c353e8ef842413cae56ae3920b8fd
table_header = [
html.Thead(html.Tr([html.Th(col) for col in df.columns]))
]
table_body = [html.Tbody([
html.Tr([
html.Td(df.iloc[i][col]) for col in df.columns
]) for i in range(len(df))
])
]
table = dbc.Table(
table_header table_body,
bordered=True,
dark=True,
hover=True,
responsive=True,
striped=True,
)
app.layout = html.Div([
html.H4(children='US Agriculture Exports (2011)'),
table
])
app.run_server(debug=True, use_reloader=False)
輸出
