角材料表中屏幕尺寸减小时如何支持相同的列尺寸 [英] 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?

下面是我的stackblitz

Below is my stackblitz

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

图片更新

推荐答案

感谢您根据我的要求澄清您的问题.对于这种行为，我建议您使用 min-widht 和 max-widht 使您的 table 单元格在每个屏幕上看起来都相似，请使用在您的堆栈闪电战中的 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;
}

另外，如果你想让第一个单元格看起来更小，因为它是序列号，所以改变它的 min-width 和 max-width 使用 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;
}

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

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