在角材料表中减小屏幕尺寸时如何支持相同的列尺寸 [英] how to support same column size when screen size reducing in angular material table

问题描述

我确实有使用9列的材料表，即使屏幕缩小，我也希望保持相同的列大小.

I do have material table where I am using the 9 columns, I would like to maintain same column size even if the screen reduces.

当前，当我缩小屏幕时，最后一列是在回避，这看起来有些奇怪，因为其他组的大小仍然相等.

Currently, When I reduce my screen last column is shirking first which looks bit odd as other groups are still having equal size.

无论如何，即使屏幕尺寸减小了，我们也可以为总结算量"支持相同的列尺寸吗?

Is there anyway we can support same column size for "total settlement amount"even screen size reduces?

下面是我的闪电战

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

图片已更新

推荐答案

感谢您根据我的要求澄清您的问题.为此，我建议您使用 min-widht 和 max-widht 来使您的 table 单元格在每个屏幕上看起来都相似，请使用在您的stackblitz中CSS下方

Thanks for clarifying your problem on my request. for this behavior I would suggest you to use min-widht and max-widht to make you table cell looks similar on every screen, please use below CSS in your stackblitz

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

此外，如果您要使第一个单元格看起来更小，因为它是序列号，因此请使用 first-child

Also if you want to make first cell look smaller as it is serial numbers so change its min-width and max-widthusing first-child

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

仅更改"总结算金额"，正如您在问题中提到的，然后在这些单元格上使用一些CLASS( th td )并像上面一样设置样式

To change only "total settlement amount" as you mentioned in your question then use some CLASS on those cell(th td) and style it like above

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

 }

这篇关于在角材料表中减小屏幕尺寸时如何支持相同的列尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！