求助：Dash表格圆角边框厚度匹配样式调整方案

问题核心是单元格边框与外层table边框在圆角区域重叠，overflow:hidden裁剪后，单元格边框会覆盖外层圆角的边框部分，导致视觉上圆角处边框变细。以下是符合要求的解决方案：

修改思路 #

• 外层table负责整个表格的圆角和外层边框，保留border、borderRadius和overflow:hidden
• 单元格仅设置内部分隔边框（右侧+底部），避免与外层边框重叠
• 通过条件样式移除最后一列的右侧边框、最后一行的底部边框，消除多余线条
• 表头同步调整边框样式，保持视觉统一

修改后的完整代码 #

import dash
from dash import html
import dash_table

app = dash.Dash(__name__)

app.layout = html.Div([
    dash_table.DataTable(
        id='my-table',
        columns=[
            {'name': 'Column 1', 'id': 'col1'},
            {'name': 'Column 2', 'id': 'col2'},
            {'name': 'Column 3', 'id': 'col3'},
        ],
        data=[
            {'col1': 1, 'col2': 2, 'col3': 3},
            {'col1': 4, 'col2': 5, 'col3': 6},
            {'col1': 7, 'col2': 8, 'col3': 9},
        ],
        style_table={
            'border-collapse': 'separate',
            'border-spacing': '0',
            'border': '1px solid red',
            'borderRadius': '20px',
            'overflow': 'hidden',
        },
        style_cell={
            'borderRight': '1px solid red',
            'borderBottom': '1px solid red',
            'padding': '8px',
            'backgroundColor': '#ffffff',  # 设置单元格背景色，避免透明导致的边框重叠视觉问题
        },
        style_header={
            'backgroundColor': '#f0f0f0',
            'fontWeight': 'bold',
            'borderRight': '1px solid red',
            'borderBottom': '1px solid red',
        },
        # 移除最后一列的右侧边框、最后一行的底部边框
        style_cell_conditional=[
            {'if': {'column_id': 'col3'}, 'borderRight': 'none'},
            {'if': {'row_index': 2}, 'borderBottom': 'none'},
        ],
        # 表头最后一列同样移除右侧边框
        style_header_conditional=[
            {'if': {'column_id': 'col3'}, 'borderRight': 'none'},
        ]
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

效果说明 #

这样调整后，外层table的边框完整包裹圆角区域，单元格仅负责内部的分隔线条，不会在圆角处与外层边框重叠，视觉上圆角边框的厚度和外侧边框完全一致，同时满足你不使用HTML/div/box-shadow的要求。

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