我想做一个这样的表格,但是我没有办法让表格的第一行可以这样做。我希望你能告诉我怎么做,谢谢
y53ybaqx1#
这是我的html:
<div class="table-container"> <table mat-table [dataSource]="tableData"> <ng-container matColumnDef="colspan-stt"> <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2" style=" width: 50px ">Stt</th> </ng-container> <ng-container matColumnDef="stt"> <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}" style=" width: 50px ">Stt </th> <td mat-cell *matCellDef="let element"> </td> </ng-container> <ng-container matColumnDef="colspan-kyHieu"> <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2" style=" width: 70px ">Ký hiệu</th> </ng-container> <ng-container matColumnDef="kyHieu"> <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}" style=" width: 70px ">Stt </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="colspan-congDung"> <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Công dụng</th> </ng-container> <ng-container matColumnDef="congDung"> <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}">Công dụng </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="colspan-ngayBd"> <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Ngày BĐ ghi NKGS</th> </ng-container> <ng-container matColumnDef="ngayBd"> <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}">Ngày BĐ ghi NKGS </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="colspan-thiCong"> <th mat-header-cell *matHeaderCellDef [attr.colspan]="2" style=" width: 140px ">Thi công </th> </ng-container> <ng-container matColumnDef="thiCongMong"> <th mat-header-cell *matHeaderCellDef style=" width: 70px ">Móng </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="thiCongCot"> <th mat-header-cell *matHeaderCellDef style=" width: 70px ">Cột </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="colspan-nghiemThu"> <th mat-header-cell *matHeaderCellDef [attr.colspan]="6" style=" width: 420px ">Nghiệm thu</th> </ng-container> <ng-container matColumnDef="nghiemThuDaoMong"> <th mat-header-cell *matHeaderCellDef style=" width: 70px ">Đào móng </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="nghiemThuCotThep"> <th mat-header-cell *matHeaderCellDef style=" width: 70px ">Cốt thép </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="nghiemThuDucMong"> <th mat-header-cell *matHeaderCellDef style=" width: 70px ">Đúc móng </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="nghiemThuLapMong"> <th mat-header-cell *matHeaderCellDef style=" width: 70px ">Lấp móng </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="nghiemThuDungCot"> <th mat-header-cell *matHeaderCellDef style=" width: 70px ">Dựng cột </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="nghiemThuChuyenGd"> <th mat-header-cell *matHeaderCellDef style=" width: 70px ">Chuyển GĐ </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="colspan-hoanCong"> <th mat-header-cell *matHeaderCellDef [attr.colspan]="2" style=" width: 140px ">Hoàn công </th> </ng-container> <ng-container matColumnDef="hoanCongMong"> <th mat-header-cell *matHeaderCellDef style=" width: 70px ">Móng </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="hoanCongCot"> <th mat-header-cell *matHeaderCellDef style=" width: 70px ">Cột </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <ng-container matColumnDef="colspan-nhatKy"> <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Nhật ký (Chưa có/Phải có)</th> </ng-container> <ng-container matColumnDef="nhatKy"> <th mat-header-cell *matHeaderCellDef [ngStyle]="{'display': 'none'}">Nhật ký (Chưa có/Phải có) </th> <td mat-cell *matCellDef="let element"></td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumnsLv2; sticky: true"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumnsLv1;sticky: true"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumnsLv1;"></tr> </table> </div>
和ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-table-mongcot', templateUrl: './table-mongcot.component.html', styleUrls: ['./table-mongcot.component.scss'] }) export class TableMongcotComponent implements OnInit { displayedColumnsLv1 = ["stt", "kyHieu", "congDung", "ngayBd", "thiCongMong", "thiCongCot", "nghiemThuDaoMong", "nghiemThuCotThep", "nghiemThuDucMong", "nghiemThuLapMong", "nghiemThuDungCot", "nghiemThuChuyenGd", "hoanCongMong", "hoanCongCot", "nhatKy"] displayedColumnsLv2 = ["colspan-stt", "colspan-kyHieu", "colspan-congDung", "colspan-ngayBd", "colspan-thiCong", "colspan-nghiemThu", "colspan-hoanCong", "colspan-nhatKy"] tableData: any = ['', '', ''] constructor() { } ngOnInit(): void { } }
1条答案
按热度按时间y53ybaqx1#
这是我的html:
和ts