Table shows horizontal scrollbar since v6.0.0-beta-5

[klinki]

Bug, feature request, or proposal:

After updating to version 6.0.0-beta-5 our tables started to show horizontal scrollbar.
It is either bug or undocumented behavior - I looked into changelog and it mentions table only here:

• table: move padding from rows to cells (fix(table): move padding from rows to cells #10499) (e0321db)

If there are any other changes in tables, please note them in changelog.

What is the expected behavior?

There shouldn't be horizontal scrollbar.

Old version - without scrollbar

New version - with scrollbar

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Any version since 6.0.0-beta-5

[pfeigl]

Looking at the screenshot, this doesn't look like a scrollbar in the table but actually within the tabs. Please provide a stackblitz of your markup in order to reproduce the problem and see what is actually going wrong.

[andrewseguin]

Would love to help; please re-open with a reproducible example on stackblitz so we can investigate a solution

[klinki]

While it is not an perfect example, I hope it will be sufficient.

Old material design version:
https://stackblitz.com/edit/angular-nmkmgq

New one:
https://stackblitz.com/edit/angular-d8tvxt

[pfeigl]

Two points which should fix your problem:

• Your headers combined should not be more than 100% (they are right now)
• You did not allow your flex boxes to shrink, which is a problem now, as first and last cell have paddings.
  Use something like this to allow shrinking for your headers flex: 0 1 14%; instead of flex: 0 0 14%;

[klinki]

@pfeigl Thanks! It works :)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}