Border-collapse : 使用 css 单独不处理 dash_table.DataTable 样式 - 尝试使用边框间距答案

【问题标题】：Border-collapse : separate not working on dash_table.DataTable styling using css - trying to use border-spacingBorder-collapse : 使用 css 单独不处理 dash_table.DataTable 样式 - 尝试使用边框间距
【发布时间】：2021-03-21 23:57:53
【问题描述】：

我正在尝试创建一个表格来显示它的行，它们之间有空格。我想通过使用边框折叠和边框间距来做到这一点，但代码似乎不起作用。如何使用 css 或常规 style* 功能在 dash_table.DataTable 中的行之间创建空间？

css 似乎可以工作，我可以更改填充和边距，但是边框折叠和边框间距没有效果。

这是我当前的代码：

dash_table.DataTable(                                                                                 
               data=d30.to_dict('records'),                                                                                   
               columns=[{'id': c, 'name': c} for c in d30.columns],                                                                                     
               id='tablealerta',                                                                                   
               style_as_list_view=True,                                                                                   
               style_data={'textAlign': 'center',                                                                                                
                           'backgroundColor': '#22252B',
                           'border':'2px solid #747678',
                           'font-size': '12px',
                           'font-family': 'Arial'},
               style_header={'textAlign': 'center',                                                                                          
                             'backgroundColor': '#000000',
                             'border-top' : '1px solid black',
                             'font-size': '12px',
                             'font-family': 'Arial',                                                                                                  
                             'font-weight': 'bold'},
               css=[{'selector':'table', 'rule' : 'border-collapse: separate;'},                                                                                       
                    {'selector':'table', 'rule' : 'border-spacing: 0 50px;'},                                                                                        
                    {'selector':'table', 'rule' : 'margin-top: 5px;'},
                    {'selector':'td, th', 'rule' : 'padding: 20px;'}])

【问题讨论】：

标签： html css datatable border plotly-dash

【解决方案1】：

试试这个

边框折叠

css=[{'selector':'table', 'rule' : 'borderCollapse: separate;'},

【讨论】：

【解决方案2】：

已解决：创建多个字典条目时，css 将仅应用每个选择器的最后一个条目，因此代码应如下所示：

css=[
{'selector':'table', 'rule' : 'border-collapse: separate; border-spacing: 0 15px; margin-top: 5px;'},                                                                                                        
{'selector':'td', 'rule' : 'padding-top: 5px; padding-bottom : 5px;'},                                                                                                             
{'selector':'td:last-child', 'rule':'border-right : 2px solid #747678'},                                                                                                           
{'selector':'td:first-child', 'rule':'border-left : 2px solid #747678'}]

【讨论】：