앵귤러 머티리얼 테이블에서 화면 크기를 줄일 때 동일한 컬럼 크기를 지원하는 방법

Dec 15 2020

9 열을 사용하는 소재 테이블이 있는데 화면이 작아도 같은 열 크기를 유지하고 싶습니다.

현재, 내 화면을 줄이면 다른 그룹이 여전히 동일한 크기를 가지고 있기 때문에 마지막 열이 처음으로 약간 이상하게 보입니다.

어쨌든 화면 크기가 작아도 "총 정산 금액"에 대해 동일한 열 크기를 지원할 수 있습니까?

아래는 내 stackblitz입니다.

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

이미지 업데이트

답변

4 Awais Dec 15 2020 at 12:40

제 요청에 대한 문제를 명확히 해주셔서 감사합니다. 이 동작에 대해 사용 min-widht하고 모든 화면에서 셀이 비슷하게 보이 max-widht도록하려면 tablestackblitz에서 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*/

 }