como suportar o mesmo tamanho de coluna ao reduzir o tamanho da tela na mesa de material angular

Dec 15 2020

Eu tenho uma tabela de materiais onde estou usando as 9 colunas, gostaria de manter o mesmo tamanho de coluna, mesmo que a tela reduza.

Atualmente, quando eu reduzo minha tela, a última coluna está se esquivando primeiro, o que parece um pouco estranho, pois outros grupos ainda têm o mesmo tamanho.

Existe alguma maneira que possamos suportar o mesmo tamanho de coluna para "valor total de liquidação" mesmo que o tamanho da tela seja reduzido?

Abaixo está meu stackblitz

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

Imagem Atualizada

Respostas

4 Awais Dec 15 2020 at 12:40

Obrigado por esclarecer seu problema em meu pedido. para este comportamento, eu sugiro que você use min-widhte max-widhtfaça sua tablecélula parecer semelhante em todas as telas, por favor, use CSS abaixo em seu stackblitz

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

Além disso, se você quiser fazer com que a primeira célula pareça menor, pois são números de série, altere seus min-widthe max-widthusandofirst-child

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

Para alterar apenas o " valor total de liquidação " como você mencionou em sua pergunta, use CLASSE nessas células ( th td) e estilize-o como acima

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

 }