title: Styling table elements in Dash Python
body: <p>very new to Python/ Dash and trying to style my tables so that the content displays vertically as opposed to horizontally (which it does at present), like so:</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th style="text-align: left;">Name</th>
  <th style="text-align: center;">DOB</th>
  <th style="text-align: right;">Email</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td style="text-align: left;">Simon</td>
  <td style="text-align: center;">03/06/1996</td>
  <td style="text-align: right;">dummyemail@email.com</td>
  </tr>
  </tbody>
  </table>
  </div>
  <p>ideally all of the content would display vertically, and styling would be used to associate the label with its value. Can anyone point me in the right direction for doing so?</p>
  <pre><code>app.layout = html.Div(children=[
      html.H1('My Dashboard ', style={'font-weight': 'bold', 'text-align': 'left', 'color': 'white', 'backgroundColor': colors['background']}),
      html.H3(' '
              'Customer Interaction Dashboard'
              ' ',
              style={'font-weight': 'bold', 'color': 'grey', 'text-align': 'center',
                     'padding': '10'}),
      html.H1(' '
              ' '
              ' ',
              style={'font-weight': 'bold', 'color': 'grey',
                     'padding': '10'}),
  
      html.Div([
          html.Div(' '
                   &quot;&quot;&quot;User ID or Customer Name&quot;&quot;&quot;,
                   style={'margin-right': '2em', 'margin-left':'6em', 'color': 'grey', 'font-weight': 'bold', 'font-size': '15px', 'padding':
                       '20', 'margin-bottom': '40px'}),
  
          # dropdown section
          dcc.Dropdown(options=devices, id=&quot;input&quot;,
                       style={'width': '60%', 'verticalAlign': &quot;middle&quot;, 'font-size': '12px', 'padding': '20'}),
      ], style=dict(display='flex')),
  
      html.Div(children=[
                            html.Div(children=[
                                dash_table.DataTable(
                                    id='profile_table',
                                    columns=[
                                        {&quot;name&quot;: [&quot;   Profile Information &quot;, &quot;Name&quot;], &quot;id&quot;: &quot;customerName&quot;},
                                        {&quot;name&quot;: [&quot;   Profile Information &quot;, &quot;Date of Birth&quot;], &quot;id&quot;: &quot;birthDate&quot;},
                                        {&quot;name&quot;: [&quot;   Profile Information &quot;, &quot;Email Address&quot;], &quot;id&quot;: &quot;EmailAddress&quot;},
                                        {&quot;name&quot;: [&quot;   Profile Information &quot;, &quot;Status&quot;], &quot;id&quot;: &quot;Active_Status&quot;},
                                        {&quot;name&quot;: [&quot;   Profile Information &quot;, &quot;Products&quot;], &quot;id&quot;: &quot;productName&quot;}
                                    ],
                                    merge_duplicate_headers=True,
                                    data=[],
  
                                    style_table={'display': 'inline-block',
                                                 'float': 'left',
                                                 'margin-right': '100px',
                                                 'margin-left': '50px',
                                                 'display': 'flex',
                                                 'width': '30%',
                                                 'border': '2px grey'},
                                    style_as_list_view=True,
                                    style_cell={'padding': '5px',
                                                'fontSize': '18', 'font-family': 'sans-serif', 'textAlign': 'left',
                                                'font-color': 'grey'},
                                    style_header={
                                        'backgroundColor': '#e1e4eb',
                                        'fontWeight': 'bold',
  
                                        'align': 'center'}
                                ),
  
                                dash_table.DataTable(
                                    id='table',
                                    columns=[
                                        {&quot;name&quot;: [&quot;Timeline&quot;], &quot;id&quot;: &quot;EventDate&quot;},
                                        {&quot;name&quot;: [&quot;Timeline&quot;], &quot;id&quot;: &quot;EventTime&quot;},
                                        {&quot;name&quot;: [&quot;Timeline&quot;], &quot;id&quot;: &quot;EventClass&quot;},
                                        {&quot;name&quot;: [&quot;Timeline&quot;], &quot;id&quot;: &quot;Message&quot;},
                                    ],
                                    data=[],
                                    merge_duplicate_headers=True,
                                    style_table={'display': 'inline-block', 'max-width': '600px', 'border': '2px grey',
                                                 },
                                    style_as_list_view=True,
                                    style_header={
                                        'backgroundColor': '#e1e4eb',
                                        'fontWeight': 'bold',
                                        'align': 'center'
                                    },
                                    style_cell={
                                        # all three widths are needed
                                        'fontSize': '18', 'font-family': 'sans-serif', 'font-color': 'grey',
                                        'minWidth': '300px', 'width': '300px', 'maxWidth': '600px',
                                        'overflow': 'hidden',
                                        'textOverflow': 'ellipsis',
                                        'textAlign': 'left',
                                    },
                                    style_cell_conditional=[
                                        {'if': {'column_id': 'EventDate'},
                                         'width': '30%'},
                                        {'if': {'column_id': 'EventTime'},
                                         'width': '90px'}
                                        # {'if': {'column_id': 'Pressure'},
                                        # 'width': '130px'},
                                    ],
                                    style_data={
  
                                        'height': 'auto',
                                        'width': 'auto'
                                    },
                                    style_data_conditional=[
                                        {
                                            'if': {
                                                'filter_query': '{EventClass} = fraudFlag',
                                                'column_id': 'EventClass'
                                            },
                                            'font-color': '#FF4136',
                                            'backgroundColor': '#FF4136',
                                            'color': 'white'
                                        },
                                    ],
  
                                    sort_mode='multi',
                                    sort_action='native',
                                    sort_by=[{'column_id': 'EventDate', 'column_id': 'EventTime','direction': 'desc'}]
  
                                )],
                                # style=dict(display='flex')
                                style={'border-color': 'grey', 'border-width': '7px'}
                            ),
  
                            dcc.Interval(
                                id='interval_component',
                                interval=10000,
                                n_intervals=0,
  
                            ),
                            html.Div(children=''''''),
                        ] + [html.Div(id=&quot;out-all-types&quot;)])
  
  ])
  </code></pre>