매트 테이블에 높이를 지정하고 매트 행을 스크롤 가능하게 만듭니다.
엠디 에츠
매트 테이블이 있습니다.
<div class="card-body">
<table mat-table [dataSource]="filteredEntries">
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef>Date</th>
<td mat-cell *matCellDef="let dailyEntry">{{dailyEntry.date | date:'shortDate'}}</td>
</ng-container>
// more columns...
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns:displayedColumns;"
[class.cal-day-selected]="row.date.isSame(selectedDay)"
[class.highlighted-daily-entry]="row === highlightedDailyEntry"
[class.highlight-selected]="dailyEntriesActionQueue.includes(row) && inBackoffice"
(click)="onRowClick($event, row)"></tr>
</table>
</div>
테이블 (또는 매트 행)에 높이를 지정하고 mat-row필요한 경우 스크롤 가능 하게 만들고 싶습니다 . 그러나 문제는 높이가 mat-table및 mat-row. 래퍼 클래스를 추가하여 할 수 있습니다 card-body.
.card-body {
height: 80vh;
overflow-y: scroll;
}
그러나 그것은 분명히 mat-row. 적용 overflow-y및 / 또는 height에 mat-row아무것도하지 않습니다. 누구든지 테이블에 높이를 추가하고 높이를 mat-row초과하는 경우 에만 스크롤 가능 하게 만드는 방법을 알고 있습니까?
편집 : 나는 기본적으로 주석에 게시 된 이 stackblitz 와 똑같이 작동하도록 하고 있습니다. 잘 작동하지만 테이블 맨 위부터 시작하는 스크롤 막대 대신 헤더 다음에 시작하고 싶습니다.
그래서이 대신 (테이블 상단에서 시작) 
나는 다음과 같이 보이기를 원합니다 (헤더 뒤에서 시작하여 검은 색 막대가 스크롤 막대를 나타냅니다)
Fredrik_Macrobond
현재 머티리얼 테이블 구현으로는이를 수행 할 방법이 없습니다. 그러나 테이블의 헤더 행 요소를 위의 래핑 요소로 이동하여 매우 쉽게 해결할 수 있지만 그렇게 우아하지는 않습니다.
ngAfterViewInit() {
const headerRow = document.querySelector('mat-header-row');
const matTable = document.querySelector('mat-table');
const tableContainer = document.querySelector('.example-container');
if (tableContainer && headerRow && matTable) {
tableContainer.insertBefore(headerRow, matTable);
}
}
그런 다음 CSS 파일에서 래퍼의 오버플로를 숨김으로 설정하고 테이블의 높이를 100 %로 설정하고 오버플로를 자동으로 설정합니다. 또한 래퍼의 플렉스 레이아웃으로 변경했습니다.
.example-container {
height: 400px;
overflow: hidden;
display: flex;
flex-direction: column;
}
mat-table {
width: 100%;
overflow: auto;
height: 100%;
}
또한 속성 대신 재질 테이블 요소를 사용하도록 변경하여 html 테이블 요소를 사용하지 않아도됩니다.
여기에서 작동하는 예를 참조하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
여러 줄의 텍스트로 스크롤 가능한보기를 설정하려고하지만 앱이 실행될 때 스크롤 할 때 매우 느리게 실행됩니다.
- 2
Expander에서 ListBox를 다른 컨트롤을 오버런하지 않고 스크롤하도록 만듭니다.
- 3
SwiftUI : 화면 높이를 초과하는 경우에만 ScrollView를 스크롤 가능하게 만듭니다.
- 4
매트릭스를 효율적으로 인덱싱하고 패키지 CoopGame을 메모리 집약적이지 않게 만듭니다.
- 5
스크롤 할 때 매트 테이블 행의 이온 아이콘이 고정 된 매트 헤더로 이동합니다.
- 6
Bootstrap의 다른 테이블에 영향을주지 않고 고정 헤더로 1 개의 테이블을 스크롤 가능하게 만드는 방법
- 7
스크롤바없이 배경 콘텐츠를 스크롤하지 않고 고정 위치 div를 스크롤 가능하게 만듭니다.
- 8
스크롤바없이 배경 콘텐츠를 스크롤하지 않고 고정 위치 div를 스크롤 가능하게 만듭니다.
- 9
첫 번째 행과 열을 고정하여 HTML 테이블을 스크롤 가능하게 만들기
- 10
부트 스트랩 행 내부에 테이블을 배치하려고하지만 테이블 너비가 행을 가로 질러 점프합니다.
- 11
테이블이 jquery로 스크롤 가능한 div에있을 때 테이블 행을 스크롤하여 어떻게 만들 수 있습니까?
- 12
jQuery : 링크-제목 텍스트를 추출하고 새 컨테이너에 넣고 URL을 만듭니다.
- 13
매시간 crontab을 사용하여 Python 스크립트를 실행하려고하지만 Python 코드의 한 섹션이 실행되지 않습니다.
- 14
매트 테이블에서 테이블의 높이를 지정할 수 없으며 머리글과 바닥 글을 고정 할 수 없습니다.
- 15
부트 스트랩 / 스타일러스-테이블 열을 가능한 작게 만듭니다.
- 16
한 번에 데이터를 전치하고 서식을 지정할 수있는 vba 스크립트 또는 매크로를 만들어야합니다.
- 17
테이블 본문을 테이블로 스크롤 가능하게 만들기
- 18
PyQt의 그리드 레이아웃에서 QPainter로 위젯을 스크롤 가능하게 만듭니다.
- 19
자바 스크립트는 버튼을 클릭하고 div에 이미지를 만듭니다.
- 20
스프링 부트는 MS SQL에서 존재하는 테이블을 매핑하지 않습니다.
- 21
매트 테이블 행 아래에 구성 요소를 삽입하면 단일 열에 만 삽입됩니다.
- 22
<Pre>의 크기를 수정하고 html에서 스크롤 가능하게 만듭니다.
- 23
두 사전의 데이터를 매핑하고 자바 스크립트의 특정 형식으로 결과를 만듭니다.
- 24
가라테 테스트- "매치 각각"에서 "또는"매치를 수행하는 방법이 있습니까?
- 25
GeometryReader가 텍스트 높이를 잘못 만듭니다.
- 26
내 수업 설정을 타고 인쇄 매체에 대한 부트 스트랩 테이블 배경색 설정을 어떻게 중지합니까?
- 27
매크로가 선택한 행 / 열을 업데이트하지 않습니다.
- 28
Word에서 중앙 텍스트를 검색하고 서식을 지정합니다. -매크로 / VBA
- 29
특정 매개 변수를 사용하여 다른 SQL 테이블을 업데이트하고 특정 매개 변수 만 업데이트
몇 마디 만하겠습니다