title: How to apply CSS to the <table> element through `DataTable` definition (to make its width be 100%)?
body: <h1>Problem</h1>
  
  <p>I am using the <a href="https://dash.plot.ly/dash-1-0-migration" rel="noreferrer">new "v1.0"</a> suite of <a href="https://dash.plot.ly/" rel="noreferrer">Dash</a> (see pip requirements below). I want to create a <code>DataTable</code> that is takes full width (just like a <code>&lt;p&gt;</code> element).</p>
  
  <p>I have set up my table as following (full MWE below):</p>
  
  <pre class="lang-py prettyprint-override"><code>dash_table.DataTable(
      …
      style_table={
          'maxHeight': '50ex',
          'overflowY': 'scroll',
          'width': '100%',
          'minWidth': '100%',
      },
      …
  </code></pre>
  
  <p>However, even if the <code>&lt;div class="cell cell-1-1 dash-fixed-content"&gt;</code> generated HTML container is full width, the <code>&lt;table&gt;</code> it contains isn't, as shown in the demo below.</p>
  
  <p><a href="https://i.stack.imgur.com/LdCAV.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/LdCAV.gif" alt="gif demo"></a></p>
  
  <p>The problem is that… <strong>the <s>same</s> similar code works with Dash 0.x</strong>… </p>
  
  <h1>Question</h1>
  
  <blockquote>
    <p>Using Dash 1.0, 
    how to make cells to auto-expand horizontally, so that the table fills up the entire horizontal space? </p>
  </blockquote>
  
  <p>Or in other words, how to style the <code>&lt;table&gt;</code> element through the <code>DataTable</code> element?</p>
  
  <hr>
  
  <h1>Minimal <em>(sometimes not so)</em> Working Examples</h1>
  
  <h2>with Dash 0.x:  ✓</h2>
  
  <ul>
  <li><code>0.x_requirements.txt</code></li>
  </ul>
  
  <pre><code>dash-core-components==0.39.0
  dash-html-components==0.13.2
  dash-renderer==0.15.1
  dash-table==3.1.7
  dash==0.31.1
  datetime
  pandas==0.23.4
  plotly==3.4.1
  </code></pre>
  
  <ul>
  <li><code>0.x_testapp.py</code></li>
  </ul>
  
  <pre class="lang-py prettyprint-override"><code>import dash
  import dash_table
  import dash_html_components as html
  import pandas as pd
  
  df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
  
  app = dash.Dash(__name__)
  
  app.layout = html.Div(
      [
          html.P(
              "foobar",
              id='datatable-interactivity-container',
          ),
          dash_table.DataTable(
              id='table',
          # data import
              data=df.to_dict("rows"),
              columns=[{"name": i, "id": i} for i in df.columns],
          # table interactivity
              editable=True,
              # filtering=True,
              sorting=True,
              sorting_type="multi",
              row_selectable="multi",
              # row_deletable=True,
          # table style (ordered by increased precedence: see 
          # https://dash.plot.ly/datatable/style in § "Styles Priority"
              # style table
              style_table={
                  'maxHeight': '50ex',
                  'overflowY': 'scroll',
                  'width': '100%',
                  'minWidth': '100%',
              },
              # style cell
              style_cell={
                  'fontFamily': 'Open Sans',
                  'textAlign': 'center',
                  'height': '60px',
                  'padding': '2px 22px',
                  'whiteSpace': 'inherit',
                  'overflow': 'hidden',
                  'textOverflow': 'ellipsis',
              },
              style_cell_conditional=[
                  {
                      'if': {'column_id': 'State'},
                      'textAlign': 'left'
                  },
              ],
              # style header
              style_header={
                  'fontWeight': 'bold',
                  'backgroundColor': 'white',
              },
              # style filter
              # style data
              style_data_conditional=[
                  {
                      # stripped rows
                      'if': {'row_index': 'odd'},
                      'backgroundColor': 'rgb(248, 248, 248)'
                  },
                  {
                      # highlight one row
                      'if': {'row_index': 4},
                      "backgroundColor": "#3D9970",
                      'color': 'white'
                  }
              ],
          ),
      ]
  )
  
  
  
  if __name__ == '__main__':
      app.run_server(debug=True)
  </code></pre>
  
  <h2>with Dash 1.0: ✗</h2>
  
  <ul>
  <li><code>1.x_requirement.txt</code></li>
  </ul>
  
  <pre><code>dash_renderer==1.0.0
  dash-core-components==1.0.0
  dash-html-components==1.0.0
  dash-table==4.0.0
  dash==1.0.0
  pandas==0.24.2
  plotly==3.10.0
  </code></pre>
  
  <ul>
  <li><code>1.x_testapp.py</code></li>
  </ul>
  
  <pre class="lang-py prettyprint-override"><code>import dash
  import dash_table
  import dash_html_components as html
  import pandas as pd
  
  df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
  
  app = dash.Dash(__name__)
  
  app.layout = html.Div(
      [
          html.P(
              "foobar",
              id='datatable-interactivity-container',
          ),
          dash_table.DataTable(
              id='table',
          # data import
              data=df.to_dict("rows"),
              columns=[{"name": i, "id": i} for i in df.columns],
          # table interactivity
              editable=True,
              # filtering=True,
              sort_action="native",
              sort_mode="multi",
              row_selectable="multi",
              # row_deletable=True,
          # table style (ordered by increased precedence: see 
          # https://dash.plot.ly/datatable/style in § "Styles Priority"
              # style table
              style_table={
                  'maxHeight': '50ex',
                  'overflowY': 'scroll',
                  'width': '100%',
                  'minWidth': '100%',
              },
              # style cell
              style_cell={
                  'fontFamily': 'Open Sans',
                  'textAlign': 'center',
                  'height': '60px',
                  'padding': '2px 22px',
                  'whiteSpace': 'inherit',
                  'overflow': 'hidden',
                  'textOverflow': 'ellipsis',
              },
              style_cell_conditional=[
                  {
                      'if': {'column_id': 'State'},
                      'textAlign': 'left'
                  },
              ],
              # style header
              style_header={
                  'fontWeight': 'bold',
                  'backgroundColor': 'white',
              },
              # style filter
              # style data
              style_data_conditional=[
                  {
                      # stripped rows
                      'if': {'row_index': 'odd'},
                      'backgroundColor': 'rgb(248, 248, 248)'
                  },
                  {
                      # highlight one row
                      'if': {'row_index': 4},
                      "backgroundColor": "#3D9970",
                      'color': 'white'
                  }
              ],
          ),
      ]
  )
  
  
  
  if __name__ == '__main__':
      app.run_server(debug=True)
  </code></pre>