Mat Header Cell Css

Here in my mat table have 6 column when any column has not more words then it looks like image 1 but when any column has more words then ui looks like image 2 so how to set ui like image 1 when any column has more words in angular 6.

Mat header cell css. The angular material data table header s font style and text alignment is set using the following css class as listed follows. Adjusting mat table column widths. In this chapter we will showcase the configuration required to show a table using angular material. Ideally it would dynamically adjust the column widths dependent on the content of its cells.

This tutorial is about angular 5 data table here we will be creating a single page angular application from cli command and then integrate material with it and create a sample data table using mattablemodule and mat table directive the data table will support pagination sorting filtering and row selection provided by matpaginator and matsort in matpaginatormodule and matsortmodule. Normal case but when the content of a particular cell increases border of the neighbor cells don t grow and the table looks pretty bad cell with extra content here is the css. The columns of my table have very different amount of content. The datatable ui component provided by material is based on the material design provides many features like pagination sortable columns filter data frozen columns and rows etc.

Following is the content of the modified module descriptor app module ts. The mat table an angular directives is used to create table with material design and styling. The mat header row component and the matheaderrowdef directive. Angular material provides an awesome fully featured data table component that can be easily implemented in an angular application.

The data cell template has access to the data that is being displayed. You should add a min width to row and header row that sum the min widths of the columns. Mat sort header background color.