Is there a way to create space between the lines of a table in dash_table.DataTable using css or regular style capabilities? I have tried using border-collapse and border-spacing but it doesn't seem to be working. How can I achieve this desired spacing effect?
I've noticed that while I can modify padding and margin with CSS, the border-collapse and border-spacing properties are having no impact on the table layout.
Here's the current code I'm working with:
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;'}])