微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

控制 MatTable 列的宽度

如何解决控制 MatTable 列的宽度

如何控制 MatBlazor MatTable 中列的宽度

我稍微摆弄了一下,通过在浏览器“检查器”中禁用 css 类 mdc-table ......似乎有可能获得“正常”的表行为。

现在除了最后一列之外的所有列都很窄,(实际宽度:119、153、460) 最后一列只有两个图标,所以它应该是大约 100px 宽度,中间一列是一个很长的文本字符串,所以我希望它更宽。

代码没有太多戏剧性,但无论如何都在这里......

<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>

知道我能做什么吗?

解决方法

我发现设置的方式,文档里也有提到,就是在表头插入一个带有fixed with的div,比如

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。