Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
802 views
in Technique[技术] by (71.8m points)

how to support same column size when screen size reducing in angular material table

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?

Below is my stackblitz

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

Image Updated

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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

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

 }

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...