Table with cell text wrap

[mperrando]

Hi all.

I need to put a table on a page for printing.

What i need is:

• to avoid the horizontal scrollbar, instead I wish the largest column to be wrapped
• to expand the table horizontally to the full width of the "page".

Is there any way to achieve this?

Thank you.

[gabro]

Hi, it kind of depends on the specific table and the data you're showing.

Concretely, Table is implemented using CSS grid, and each column optionally takes a width parameter which can be:

• "fit-content" (default): the column is as wide as the largest content
• "fill-available": the column takes up all the available space
• { custom: number | string }: you can pass a custom number of pixels or a string. The string is directly passed to the grid template columns, so you can do anything with it, for example you could limit the max width to 200px by passing height: { custom: "minmax(max-content, 200px)" } (see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more details on these sizing options)

By strategically using the custom size for columns you should be able to achieve what you need.

[mperrando]

Thanks @gabro . Now I can expand the table on a single column using "fill-available".

Anyway, if that column has a very long text, I would like the text to wrap, instead the table expands horizontally and the scrollbar appears.

Is possible to achieve that?