角度材料表合并表中第一行的列

Question

我想制作这样的表格，但我没有办法使表格中的第一行可以这样做。我希望你能告诉我怎么做，谢谢。image table

Answer 1

这是我的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 {
    }

}