data-table styling, incorrect styling if cdk-cell use static width

[djleonskennedy]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

if cells has static width, scrolling appears and all content inside should have same styles.

What is the current behavior?

if cells has static width, scrolling appears and all content that out of view has no correct styles.

What are the steps to reproduce?

view: https://angular-g5gfng-yw7aey.stackblitz.io/
editor: https://stackblitz.com/edit/angular-g5gfng-yw7aey
Just scroll horizontally and you'll see that styles are broken.

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

I'm using app where i need dynamically change displayed columns, so when i show all columns on mobile this issue appears

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

angular: 5+,
material: 5+,
os: windows, ios
browser: chrome, IE11 - EDGE
TypeScript: doesn't matter

Is there anything else we should know?

nope

Thank you

[todoubaba]

.example-container {
  display: flex;
  flex-direction: column;
  width: 200px;
  overflow: auto; /*<-*/
}

.example-table {
  flex: 1 1 auto;
  /* overflow: auto; */ /*<-*/
  max-height: 500px;
  display: table; /*<-*/
}

[djleonskennedy]

@andrewseguin Hello, any updates about this issue ?

[kamok]

@todoubaba Thanks. It works. The key for my table was display:table !important on the .mat-table, and a separate container for overflow: auto;

Column width for my app was limited as such:

    .mat-header-cell, > .mat-cell {
      padding: 0 5px;
      min-width: 100px;
    }

Now, I have dynamic columns that do not break styling when overflow scrolling.

[flyfj]

@kamok i did exactly what you did. but adding display: table breaks the scroll and display all the content.
and also don't see the table line rendered correctly.
could you share a working complete code? thank you

[flyfj]

@djleonskennedy hi, any chance you have fixed the issue in your plunker?

[andrewseguin]

Fixed in #10594 - Use native <table> for a better styling experience

[flyfj]

@andrewseguin is there an example using the <table>? how is 'datasource' used?

[andrewseguin]

Same way as before. Check out these revised docs for help: https://github.com/angular/material2/blob/master/src/lib/table/table.md

Essentially, you will now write <table mat-table [dataSource]="myDataSource"> instead of <mat-table [dataSource]="myDataSource">

[Rajashreegr]

using the <table mat-table #table [dataSource]="dataSource"> gives me the error - Can't bind to 'dataSource' since it isn't a known property of 'table'.

[andrewseguin]

The new functionality is included in the latest v6 RC releases