# Datatable Horizontal Overflow Issues

**URL:** <https://community.plotly.com/t/datatable-horizontal-overflow-issues/45158>\
**Category:** Dash Python\
**Created:** [September 21, 2020, 3:12pm UTC](https://community.plotly.com/t/datatable-horizontal-overflow-issues/45158 "2020-09-21T15:12:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![bigmike](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@bigmike](https://community.plotly.com/u/bigmike)\
**Post date:** [September 21, 2020, 3:12pm UTC](https://community.plotly.com/t/datatable-horizontal-overflow-issues/45158/1 "2020-09-21T15:12:06Z")

</div>

Hey everyone,

I’m working on a dash layout that places a plotly map next to a datatable on the same row. I’m utilizing the CSS from this sample app with some minor edits: [dash-sample-apps/apps/dash-oil-gas-ternary at main · plotly/dash-sample-apps · GitHub](https://github.com/plotly/dash-sample-apps/tree/master/apps/dash-oil-gas-ternary)

The issues arises when the window is wide enough to display each element side by side. The datatable is always displayed in its entirety and flows off the screen instead of adding a horizontal scroll bar. However, this issue does not occur when the datatable has its own row. In this case, the behavior is as expected. The table adds a horizontal scrollbar when the window is too narrow to display the table’s fixed width in its entirety.

I followed the documentation regarding horizontal scroll ([DataTable Width & Column Width | Dash for Python Documentation | Plotly](https://dash.plotly.com/datatable/width)) and have also tried modifying the CSS to fix the table-layout but I’m still having to luck. Any suggestions to stop the table from flowing off the page and force a horizontal scroll? Any help is appreciated, thank you!

```auto
dt.DataTable(
columns=[
     {"hideable": True, "name": i, "id": i,}
     for i in bus_df.columns
],
css=[
     {
          "selector": "table",
          "rule": "table-layout: fixed",
     }
],
style_cell={
     "whiteSpace": "normal",
     "height": "auto",
     "minWidth": "50px",
     "width": "50px",
     "maxWidth": "50px",
},
style_data_conditional=[
     {
           "if": {"row_index": "odd"},
           "backgroundColor": "rgb(248, 248, 248)",
     }
],
style_header={
      "backgroundColor": "rgb(230, 230, 230)",
      "fontWeight": "bold",
},
style_table={
     "height": 350,
     "overflowX": "scroll",
     "overflowY": "auto",
},
data=bus_df.to_dict("records"),
sort_action="native",
filter_action="native",
export_format="csv",
page_size=50,
                                        ),

```

---

<div class="post-metadata">

**Author:** ![bigmike](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@bigmike](https://community.plotly.com/u/bigmike)\
**Post date:** [September 30, 2020, 5:30pm UTC](https://community.plotly.com/t/datatable-horizontal-overflow-issues/45158/2 "2020-09-30T17:30:49Z")

</div>

Any suggestions? I’ve still had no luck solving this issue.