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.

Solution 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;
}

Solution 2

This might help someone else as this is an old post. Please refer to https://stackblitz.com/edit/angular-mdxik6-gnpzuh?embed=1&file=app/table-basic-example.css

Just add the following to your your-comp-component.css or your-comp-component.scss

.mat-row, .mat-header-row {
min-width: 2800px;
width: 100%;
}

Solution 3

Use display grid in case of ipad and mobile device screens

mat-table {
   display: -ms-grid ;
   display: grid;
}

Solution 4

Best resolve I did overcome this problem.

1. Hold dynamic data column with css

   columns = [
           {columnDef: 'select', width: 75},
           ...........
   ]
   

2. Recalculate css min width if you implement a show/hide function

   recalculateCss() {
       let cellWidth = 0;
       for (let i = 0; i < this.selected.length; i++) {
           const cell = this.selected[i];
           const column = this.columns.filter((value, index) => value.columnDef === cell);
           cellWidth += column[0] ? column[0].width : 0;
       }
       this.minWidth = cellWidth;
   }
   

3. Add css in both mat-header-row and mat-row

   [style.min-width.px]="minWidth"
   

View more solutions

Comments

[jnathn]

Please add some of your CSS.

[Hariharan Subramanian]

Added link above. Please check. Help me on this

[jnathn]

Updated answer.

[vittaljk]

please refer link below for more details css-tricks.com/snippets/css/a-guide-to-flexbox

[Pascal]

I have to add min-width: 100%; otherwise the columns are misaligned