文章/答案/技术大牛

发布

社区首页 >问答首页 >转角材质表中屏幕尺寸减小时如何支持相同的柱面尺寸

问转角材质表中屏幕尺寸减小时如何支持相同的柱面尺寸
EN

Stack Overflow用户

提问于 2020-12-14 21:10:05

回答 2查看 2.5K关注 0票数 5

我确实有材料表，在这里我使用9列，我想保持相同的列大小，即使屏幕缩小。

目前，当我减少我的屏幕，上一篇专栏首先是逃避，这看起来有点奇怪，因为其他组仍然有相同的大小。

有没有，我们可以支持相同的栏目大小，以“总结算量”，甚至屏幕大小减少？

下面是我的堆栈闪电战

https://stackblitz.com/edit/angular-bklajw-5foa62?file=app%2Ftable-basic-example.ts

图像更新

angular

angular-material

material-ui

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-15 05:40:50

谢谢你应我的要求澄清你的问题。对于这种行为，我建议您使用min-widht和max-widht使您的table单元格在每个屏幕上看起来类似，请在stackblitz中使用下面的CSS。

th.mat-header-cell,
td.mat-cell {
  text-align: center;
  border: 1px solid #ccc;
  padding: 0 !important;
  min-width: 100px;
  max-width: 100px;
}

另外，如果您想使第一个单元格看起来更小，因为它是序列号，那么使用min-width和max-width更改它的first-child。

th.mat-header-cell:first-child,
td.mat-cell:first-child{
  min-width: 50px;
  max-width: 50px;
}

如您在问题中所述，仅更改“总结算量”，然后在这些单元格(th td)上使用一些类，并将其样式设置为上面所示。

 .similar-cell-width{
    min-width: 100px;
    max-width: 100px;
    width: 100px; /*solution as per your req it fix the table cell widht*/

 }

票数 5

Stack Overflow用户

发布于 2022-06-07 16:03:03

材料将css类添加到基于displayedColumns数组的每个td中，这样您就可以使用css针对每个类。

 displayedColumns: string[] = ['name'];

<td class="mat-cell cdk-cell cdk-column-name mat-column-name" > Name </td>

CSS

 .mat-column-name {max-width: 120px; min-width: 120px;}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65296518

复制

相似问题

问转角材质表中屏幕尺寸减小时如何支持相同的柱面尺寸
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转角材质表中屏幕尺寸减小时如何支持相同的柱面尺寸EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问转角材质表中屏幕尺寸减小时如何支持相同的柱面尺寸
EN