New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table: Style Not Applied To Native Table #11456

ewaschenko opened this Issue May 22, 2018 · 4 comments


None yet
3 participants

ewaschenko commented May 22, 2018

Bug, feature request, or proposal:

Mat table styling is not applied to native table unless there exists a mat-table that loads the mat-table css

What is the expected behavior?

Style should be applied to table regardless if mat-table has been used.

What is the current behavior?

If mat-table is not used in the code, then the appropriate css is not loaded. So, if you are styling a native table without using mat-table somewhere, then the css will not be loaded and applied.


If I have a page with a native table with the mat-table styling and I navigate to it, then the styling will not be applied. But, if I then navigate to a page with a mat-table then navigate back, the styling will be applied to the native table since the css is loaded.

What are the steps to reproduce?

Open Native Table example in Stackblitz

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

Angular 6.0.1
Material 6.1.0


This comment has been minimized.

ewaschenko commented May 22, 2018

See #11442

@ewaschenko ewaschenko closed this May 22, 2018


This comment has been minimized.

josephjohansson commented May 30, 2018

A stupid workaround is to simply add

<table mat-table></table>

Before your standard table. Since it has no elements it should not show up at all. However a better solution should be implemented for sure!


This comment has been minimized.

ewaschenko commented May 31, 2018

@rodrigjg Thats what I did in my app.component so I only need it in one place. You do need to add definitions for header, or rows since else Material will throw errors if none are defined

	<mat-header-row *cdkHeaderRowDef="[]"></mat-header-row>

This comment has been minimized.

vbartolini commented Nov 7, 2018

@josephjohansson It really works! I'm newbie in the Angular and spent 4 hours wondering why all examples in web are not working. Thank you!!!

Angular 6.1.10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment