Adjusting mat-table column widths

[alie...@google.com]

What's the best way to control the widths of the columns of a mat-table? Ideally it would dynamically adjust the column widths dependent on the content of its cells.

The columns of my table have very different amount of content. Currently, all columns have the same width, which makes text in one of the columns break lines, even though there would be sufficient horizontal space.

Thanks,

– Adrian

[sfte...@gmail.com]

Bump.  I'd like to know how to do this also...

[MR]

Hello,

you have two options:

first one is fixed width:

.mat-column-Actions {

flex: 0 0 100px !important;

white-space: unset !important;

}

if you want to wrap text with no spaces, then you can use this css:

.mat-column-FileName {

word-wrap: break-word !important;

white-space: unset !important;

flex: 0 0 100px !important;

width: 100px !important;

overflow-wrap: break-word;

word-wrap: break-word;

-ms-word-break: break-all;

/* This is the dangerous one in WebKit, as it breaks things wherever */

word-break: break-all;

/* Instead use this non-standard one: */

word-break: break-word;

/* Adds a hyphen where the word breaks, if supported (No Blink) */

-ms-hyphens: auto;

-moz-hyphens: auto;

-webkit-hyphens: auto;

hyphens: auto;

}

Second option then you don`t know what with will be:

you should add a min-width to row and header-row that sum the min-widths of the columns.

[Bharathwaj Vasudevan]

Indha code work aagala

[darshan theerth]

you can use this inside

 .mat-table{}