角度材质表中屏幕尺寸缩小时如何支持相同的列尺寸

Question

我确实有材料表，其中使用了 9 列，即使屏幕缩小，我也想保持相同的列大小。

目前，当我缩小屏幕时，最后一列首先被逃避，这看起来有点奇怪，因为其他组仍然具有相同的大小。

即使屏幕尺寸缩小，我们是否也可以支持“总结算金额”相同的栏尺寸？

下面是我的堆栈闪电战

Answer 1

感谢您根据我的要求澄清您的问题。对于这种行为，我建议您使用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”，请在这些单元格上使用一些 CLASS( ) 并将其样式设置为如上所述

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

 }