Html 边框折叠：不使用dash_table.DataTable样式（使用css）-尝试使用边框间距

我正在尝试创建一个表，其中显示的行之间有空格。我想通过使用边框折叠和边框间距来实现这一点，但代码似乎不起作用。如何使用css或常规样式*功能在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;'}])                                                                                                                                           

试试这个

边界塌陷

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

试试这个

边界塌陷

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

---

已解决：创建多个词典条目时，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'}]

---

已解决：创建多个词典条目时，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'}]

---

嗨，没用嗨，没用