# How to resize Dash datatable

**URL:** <https://community.plotly.com/t/how-to-resize-dash-datatable/44489>\
**Category:** Dash Python\
**Created:** [September 3, 2020, 10:34am UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489 "2020-09-03T10:34:47Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![John-A](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John-A](https://community.plotly.com/u/John-A)\
**Post date:** [September 3, 2020, 10:34am UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489/1 "2020-09-03T10:34:47Z")

</div>

I am working with the Dash datatable. I am trying to resize my table so it does not take the whole browser width like it is shown currently below: I would like some padding around it.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/d/dfbfd9cd25872345d85ca28ce8e3270b2702f844.png)

Here is my current working code:

```auto
output = dash_table.DataTable(id='table_overview', 

                                      

                                      columns=[{'name': col, 

                                                'id': col} 

                                               for col in df.columns],

                                      

                                      style_table= {'overflowX': 'auto', 'height': '300px', 'overflowY': 'auto'},

                                      

                                      style_data = {"text-align": "center"},

                                      

                                      style_header={

                                          'backgroundColor': 'rgb(6, 67, 122)',

                                          'color': 'white',

                                          "text-align": "center",

                                          'fontWeight': 'bold'},

                                      

                                      style_cell={

                                          # all three widths are needed

                                          'minWidth': '180px', 

                                          'width': '180px', 

                                          'maxWidth': '180px',

                                          'overflow': 'hidden',

                                          'textOverflow': 'ellipsis',

                                        },

                                      

                                      data=df.to_dict('records'),

                                      

                                      page_size=20,

                                                                  

                                      )

```

Additionally, in the sample on Dash datatable, the controls at the bottom seem to be working without a callback. Is a callback necessary for this as well? Your help is greatly appreciated

---

<div class="post-metadata">

**Author:** ![Lheira](https://avatars.discourse-cdn.com/v4/letter/l/b2d939/32.png) [@Lheira](https://community.plotly.com/u/Lheira)\
**Post date:** [September 3, 2020, 12:43pm UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489/2 "2020-09-03T12:43:07Z")

</div>

Hi!  
I don’t know if I understand what you want to do, but I think you should just put your table in some sort of container, like a html.Div or a dbc.Container, and then define margins for that container (if you use dbc.Container, you probably want to define fluid=True, so that it’ responsive, [https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/)).

As for your second question, those buttons should work without a callback.

---

<div class="post-metadata">

**Author:** ![John-A](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John-A](https://community.plotly.com/u/John-A)\
**Post date:** [September 3, 2020, 12:56pm UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489/3 "2020-09-03T12:56:53Z")

</div>

Thank you very much for your input! Unfortunately the buttons are not working. What can I do?

---

<div class="post-metadata">

**Author:** ![Lheira](https://avatars.discourse-cdn.com/v4/letter/l/b2d939/32.png) [@Lheira](https://community.plotly.com/u/Lheira)\
**Post date:** [September 3, 2020, 1:12pm UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489/4 "2020-09-03T13:12:29Z")

</div>

That’s weird, they are working for me… What is the current layout of your app? And what version of dash\_table are you using?

---

<div class="post-metadata">

**Author:** ![John-A](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John-A](https://community.plotly.com/u/John-A)\
**Post date:** [September 3, 2020, 1:14pm UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489/5 "2020-09-03T13:14:51Z")

</div>

Dash - ‘1.12.0’  
Dash Table - ‘4.7.0’

---

<div class="post-metadata">

**Author:** ![Lheira](https://avatars.discourse-cdn.com/v4/letter/l/b2d939/32.png) [@Lheira](https://community.plotly.com/u/Lheira)\
**Post date:** [September 3, 2020, 1:26pm UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489/6 "2020-09-03T13:26:02Z")

</div>

I’m using dash\_table 4.9, but I don’t think the problem comes from there…  
What about the layout?

---

<div class="post-metadata">

**Author:** ![John-A](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John-A](https://community.plotly.com/u/John-A)\
**Post date:** [September 3, 2020, 1:28pm UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489/7 "2020-09-03T13:28:08Z")

</div>

What layout? The app layout you mean?

---

<div class="post-metadata">

**Author:** ![Lheira](https://avatars.discourse-cdn.com/v4/letter/l/b2d939/32.png) [@Lheira](https://community.plotly.com/u/Lheira)\
**Post date:** [September 3, 2020, 1:33pm UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489/8 "2020-09-03T13:33:15Z")

</div>

Yes, maybe there is something in your layout that causes some problem (but let’s be honest, I’m really not sure)

---

<div class="post-metadata">

**Author:** ![John-A](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@John-A](https://community.plotly.com/u/John-A)\
**Post date:** [September 3, 2020, 1:36pm UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489/9 "2020-09-03T13:36:28Z")

</div>

Maybe I should upgrade the datatble?

---

<div class="post-metadata">

**Author:** ![Lheira](https://avatars.discourse-cdn.com/v4/letter/l/b2d939/32.png) [@Lheira](https://community.plotly.com/u/Lheira)\
**Post date:** [September 3, 2020, 1:37pm UTC](https://community.plotly.com/t/how-to-resize-dash-datatable/44489/10 "2020-09-03T13:37:33Z")

</div>

You can try, it might help.