Is there a way to control the column width in dbc.Table?

Based on my review of the documentation, there are easy ways to control column width in other html-based tables, but not in the dbc.Table.from_dataframe component, which is otherwise beautifully convenient. I really want to use it, but Just in case someone knows a workaround, I would also love to control the column widths if possible. Thanks for reviewing my question.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/table/

Here is my code. It produces a great table, but the columns are a bit too wide.


df = pd.read_csv('final_charts_data.csv')
        dff = df.round(decimals = 2)

        # supress/hide certain columns
        dfff = dff.drop(['Gender', 'Ages', 'Benchmarks'], axis=1)

        # round numbers to two decimal places

        # unique values only
        data = dfff.drop_duplicates(subset=['Nutrients'])

       return dbc.Table.from_dataframe(data, id='review-final-analysis-table', 
       size='md', class_name="me-2", striped=True, 
       bordered=True, hover=True)

You can control the width of the table with the style argument, e.g. style={"width": "400px"} or style={"width": "25%"}.

By default the columns share space but expand if they have particularly wide content. If you want to control the width of individual columns you would write some custom CSS something like

table#review-final-analysis-table td:nth-of-type(1) {
  width: 50px;
}
table#review-final-analysis-table td:nth-of-type(2) {
  width: 150px;
}
3 Likes

Very helpful answer. Thank you for your time.

1 Like