Angular 2 Material Horizontal scroll Data table Border issue

Question

I am using Angular Material Data table in my application. I need to display multiple columns with a horizontal scroll table. I am facing an issue with the table row border. It's not displaying an entire width of the row. Please check the attached image for your reference. Please help me to resolve this issue.

Please check the Link for Code reference

https://stackblitz.com/edit/angular-mdxik6?file=app%2Ftable-basic-example.html

Thanks in Advance.

Answer 1

Both header row and column rows are display flex by default, changing it to display inline-flex will fix above issue

.mat-header-row, .mat-row {
    display: inline-flex;
}