앵귤러 머티리얼 테이블에서 화면 크기를 줄일 때 동일한 컬럼 크기를 지원하는 방법
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
도록하려면 table
stackblitz에서 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*/
}