How do I remove or disguise horizontal scroll in 1 row datatable?

Dash Python
1

Hi,

I am making a “form” using Dash and Skeleton Css, and I use a Datatable to display and select some of the options.
To do so, the Datatable is hidden using style = {“display”:”none”} in the Div that contains it and when some of the options are selected, I fetch some data, I use it to fill the datatable and then I use style = {“display”:”block”} to display it and continue with the form.

As you can see, most of the text is hidden and there is not a horizontal scroll to be able to read the rest.

https://screenshots.firefox.com/3gs4fJ1LxINUxYdm/127.0.0.1

This is fixed if I specify a colum_width and as I don’t know the length of the data that I will be displaying, I put a large number.
This works if the table has more than 1 row but if I only have 1, then the text contained in it is covered by the horizontal scroll as shown in the image.

https://screenshots.firefox.com/OHRkXOxXjuGeDZq6/127.0.0.1

Anyone has an idea of how could I be able to remove or disguise the horizontal scroll in that situations?

2

I forgot to add the code, here it is:

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dte
from flask import send_file
import io
import flask
import pandas as pd

app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'})
app.layout = html.Div(className="container", children=[
    html.Div(className="row", children=[
        html.Div(className="twleve columns", children=[
            html.Div("Text that user should be able to read: "),
            html.Div("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"+
                     " incididunt ut labore et dolore magna aliqua")
        ]),
    ]),
    html.Div(className="row",style={"margin-top": "2%"}, children=[
        html.Button("Reveal table", id="button"),
    ]),
    html.Div(className="row", style={"margin-top": "2%"}, children=[
        html.Div(id="table_div",className="six columns", children=[
            dte.DataTable(
                id='periods_table',
                rows=[{}],
                selected_row_indices=[],
                editable=False,
                max_rows_in_viewport=5,
                row_selectable=True,
                column_widths=[560],
            ),
        ]),
        html.Div(className="offset-by-seven five columns",  style={"background-color":"grey", "padding": "5%"},
        children=[
            "Other components"
        ]),
    ]),

])



@app.callback(Output(component_id='table_div', component_property='style'),
              [Input(component_id='button', component_property='n_clicks')])
def display_hide_table(n_clicks):
    if n_clicks:
        return {"display":"block"}
    else:
        return {"display": "none"}

@app.callback(Output(component_id='periods_table', component_property='rows'),
              [Input(component_id='table_div', component_property='style')])
def insert_data(table_style):
    if table_style == {"display":"block"}:
        return [{"Periods":"Lorem ipsum dolor sit amet, consectetur adipiscing elit,"+
            " sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"}]
    else:
        return[{}]


if __name__ == '__main__':
    app.run_server(debug=True)