como suportar o mesmo tamanho de coluna ao reduzir o tamanho da tela na mesa de material angular
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
Obrigado por esclarecer seu problema em meu pedido. para este comportamento, eu sugiro que você use min-widht
e max-widht
faça sua table
cé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-width
e max-width
usandofirst-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*/
}