CSS - MaterialUI - How can I make a table always take the full width, and not need horizontal scroll?

Question

I have tried to set each widthPercent on each TableHeader to add up to 100%, but the scroll bar is still there.

I can set static widths per column, but I end up with extra space on the right depending on the size of the window.

How do I make the table always use the full width available to it, but also always wrap text so the table does not need horizontal scroll?

Answer 1

I solved it:

MuiTable css override: tableLayout: "fixed"

MuiTableCell css override: overflow: "hidden", textOverflow: "ellipsis"