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

问题描述

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

解决方法

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

}