Border-collapse : separate not working on dash_table.DataTable styling using css - trying to use border-spacing

user_13989867 0
Viewed 446

I am trying to create a table that displays it's lines with space between them. I wanted to do so by using border-collapse and border-spacing but the code does not seem to work. How could I create space between the lines in a dash_table.DataTable using css or the regular style* capabilities?

The css seems to work, I am able to change the padding and margin, but the border-collapse and border-spacing have no effect.

Here is my current code:

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;'}])
plotly-dash datatable border css html
2 Answers

Try this

borderCollapse

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

Solved: when creating multiple dictionaries entries the css will apply only the last entry for each selector, so the code should look like:

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'}]
user_139898670
Related