如何在Python Dash中编写等效CSS nth-child背景色效果的代码

方案1：使用内置参数（最简写法） #

dash-bootstrap-components的dbc.Table已经原生封装了斑马纹样式，直接传入striped=True参数即可开启默认条纹行效果：

import dash_bootstrap_components as dbc

# 示例表格
table = dbc.Table(
    # 你的表格内容（表头+表体）
    striped=True,
    bordered=True,
    hover=True
)

如果需要自定义条纹颜色，可以在布局中内嵌样式代码，无需单独创建CSS文件：

from dash import html, Dash
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    # 内嵌自定义样式
    html.Style("""
        .table-striped > tbody > tr:nth-of-type(even) {
            background-color: #f2f2f2;
        }
    """),
    # 开启条纹的表格
    dbc.Table(
        # 表格内容省略
        striped=True
    )
])

方案2：手动生成行元素动态绑定样式（完全可控） #

如果你需要更灵活的样式控制（比如根据行数据动态调整颜色），可以在生成表体行时通过索引判断奇偶，直接给行元素绑定样式，完全用Python逻辑实现：

from dash import html
import dash_bootstrap_components as dbc

# 示例数据
columns = ["姓名", "年龄", "部门"]
data = [
    {"姓名": "张三", "年龄": 25, "部门": "技术部"},
    {"姓名": "李四", "年龄": 30, "部门": "产品部"},
    {"姓名": "王五", "年龄": 28, "部门": "运营部"}
]

# 构造表头
table_header = html.Thead(html.Tr([html.Th(col) for col in columns]))
# 构造表体，按索引奇偶设置背景色
table_body = html.Tbody([
    html.Tr(
        children=[html.Td(row[col]) for col in columns],
        # 索引从0开始，这里设置偶数行（第2、4、6行）背景色为#f2f2f2，可自行调整规则
        style={"backgroundColor": "#f2f2f2"} if idx % 2 == 1 else {}
    ) for idx, row in enumerate(data)
])

# 生成最终表格
table = dbc.Table([table_header, table_body], bordered=True)

内容的提问来源于stack exchange，提问作者PassGavin