Javascript 角度HTML-多行上的行跨度

我想创建一个看起来像图像的表

我写了一些代码，但是我的表看起来很糟糕，我不知道该怎么办

我的桌子看起来像这样

这是我写的代码

<table class="table main-table" style="width: 100%; margin-top: 20px;" id="tablas">
    <thead style="width: 100%;" style="padding-top: 5px; height:20px;">
        <tr class="sticky-header" style="color: white;">
            <th class="text-center headerTable-top-left">
                <p>Campo formativo (Materia)</p>
            </th>
            <th class="sticky-cell text-center" style="margin: 15px; padding: 15px; background: #3174AE; width: 500px;" id="hno">
                 Aprendizaje esperado (Submateria)
            </th>
            <th class="sticky-cell text-center headerTable" style="margin: 15px; padding: 15px; background: #3174AE;" id="hnombre">
                 Valor de ponderación
            </th>
        </tr>
    </thead>
    <tbody style="font-size: 13px;">
        <tr *ngFor="let c of z.controls.materias.controls; let i = index">
            <td class="text-center" style="vertical-align: middle; border-right: 1px solid black;" wspan="c.controls.submaterias.value.length">
                {{c.controls.nombre.value}}
            </td>
            <td style="border-right: 1px solid black; border-color: #ddd; background: white; padding: 0px;" class="text-center">
        <tr *ngFor="let s of c.controls.submaterias.value; let s = index" style="border-bottom: 1px solid #eee; height: 125px; width:100%">
            <td style="vertical-align:middle; border:0px;" rowspan="5">
                <div style=" width:100%">
                    {{s.nombre}}
                </div>
            </td>
        </tr>
        </td>
            <td style="border-right: 1px solid black; border-color: #ddd; background: white; padding: 0px;" class="text-center">
            <ng-container *ngFor="let s of c.submaterias; let s = index">
                <tr *ngFor="let d of s.comentarios; let ss = index" style="border-bottom: 1px solid #eee; height: 125px; width:100%">
                    <td style="vertical-align:middle; border:0px;" rowspan="1">
                        <div style=" width:100%">
                            {{d.opcion}}
                        </div>
                    </td>
                </tr>
            </ng-container>
        </td>
    </tr>
</tbody>

---

任何想法或建议都将被采纳

您能把Ts代码放在问题中吗？@huanfeng我刚刚上传了我的Ts代码，谢谢。

    setAprendizaje(datos, index) {
    let pantalla = this.FormGuardar.get("aprendizajes") as FormArray;
    let p = this._fb.group({
        aprendizajeesperadoid: datos.aprendizajeesperadoid,
        configurarcomentarios: datos.configurarcomentarios,
        periodoevaluacionid: datos.periodoevaluacionid,
        periodoevaluacion: datos.periodoevaluacion,
        cicloid: datos.cicloid,
        gradoid: datos.gradoid,
        materias: this._fb.array([])
    });
    pantalla.push(p);

    let r = (pantalla.at(index).get("materias") as FormArray);
    (datos.materias as any[]).map((z, i) => {
        let pr = this._fb.group({
            materiaporplanestudioid: z.materiaporplanestudioid,
            nombre: z.nombre,
            submaterias: [z.submaterias]
        });
        r.push(pr);
    });

    /* z.submaterias = [
        {
            aprendizajeesperadopormaterisubmateriaid: 8,
            nombre: "Identifica su esquema corporal y sus posibilidades de movimiento.",
            comentarios: [
                {
                    comentarioaprendizajepormateriaid: 101
                    opcion: "A"
                },
                {
                    comentarioaprendizajepormateriaid: 102
                    opcion: "B"
                },
                ,
                {
                    comentarioaprendizajepormateriaid: 103
                    opcion: "C"
                }
            ]
        }
    ]*/
}