matblazor - Controlling width of MatTable Column

Question

How can I control the width of the columns in MatBlazor MatTable

I have fiddled a bit around, and by disabling the css class mdc-table in the browser 'inspector'... it seems to be possible to get 'normal' table behavior.

right now all column except the last column is quite narrow, (actual widths: 119, 153, 460) the last columns is just two icons, so it should be about 100px width, and the middle column is a quite long text string, so I would like that to be much wider.

There isn't much drama about the code, but here it is anyway...

<MatDialog @bind-IsOpen="@ShowBeginCreateNewSLA">
    <MatDialogTitle>Service level agremeents</MatDialogTitle>
    <MatDialogContent>
        <MatTable ShowPaging="false" Items="SLAOptions">
            <MatTableHeader>
                <th>Id</th>
                <th>Description</th>
                <th>Action</th>
            </MatTableHeader>
            <MatTableRow>
                <td>@context.Id</td>
                <td>@context.Description</td>
                <td><MatIconButton Icon="delete"  /></td>
            </MatTableRow>
        </MatTable>
    </MatDialogContent>
    <MatDialogActions>
        <MatButton>Close</MatButton>
    </MatDialogActions>
</MatDialog>

Any idea what I can do?

Answer 1

I found that the way to set it, also mentioned in the documentation, is simply to insert a div with a fixed with in the table header, such as

<th><div style="width: 200px">Options</div></th>