[Table] Horizontal overflow content not rendered correctly

[zrilo]

Bug

md-table overflow hidden columns not rending correctly

What is the expected behavior?

When table has more columns that can be visible shown, horizontal scrolling to bring those columns in to view should show consistent styling

What is the current behavior?

When columns are scrolled in to view there is no white background or row borders. See image

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

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

up to date angular and material, all browsers

Is there anything else we should know?

[josephperrott]

Can you please provide a reproduction case using Plunker/StackBlitz?

[andrewseguin]

I imagine that you have some min-widths set up on the column. If so, you'll want to set a min-width on the mat-row and mat-header-row as well

[benb7760]

@andrewseguin I came across this issue recently. As you suggested, it is resolved by adding a min-width to row and header-row that sum the min-widths of the columns. Do you still want a repro produced?

[andrewseguin]

If you're satisfied with the min-width then we should be good. Unfortunately I couldn't find any workaround to this. If columns want a specific min/max width, it's necessary to also adjust the row so that it doesn't shrink too much/

[enekonieto]

Putting min-width to row and header-row didn't help me. Putting min-width in mat-table did the trick.

[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.}