html - 无法在 html 中对齐表头和表体，使用带有内存数据的 Angular

Question

我似乎无法将 table 头与 table 身对齐。

这是我的元素，用于制作网络类型的学生数据存储数据库。

    <table class="table table-striped">
                <thead>
                  <tr>
                    <th scope="col">Id</th>
                    <th scope="col">NIM</th>
                    <th scope="col">Nama</th>
                    <th scope="col">Jenis Kelamin</th>
                    <th scope="col">Alamat</th>
                    <th scope="col">Nama Bapak</th>
                    <th scope="col">Nama Ibu</th>
                    <th scope="col">Jurusan</th>
                    <th scope="col">Prodi</th>
                    <th scope="col">IPK Terakhir</th>
                    <th scope="col">Hapus</th>
                  </tr>
                </thead>
                <tbody *ngFor="let mhs of mhss">
                  <a routerLink="/detail/{{mhs.id}}">
                    <tr>
                          <td>{{mhs.id}}</td>
                          <td>{{mhs.nim}}</td>
                          <td>{{mhs.name}}</td>
                          <td>{{mhs.jk}}</td>
                          <td>{{mhs.alamat}}</td>
                          <td>{{mhs.nama_bapak}}</td>
                          <td>{{mhs.nama_ibu}}</td>
                          <td>{{mhs.jurusan}}</td>
                          <td>{{mhs.prodi}}</td>
                          <td>{{mhs.ipk}}</td>
                          <td><button class="delete" title="delete mhs"
                          (click)="delete(mhs)">HAPUS</button></td>
                    </tr>
                  </a>
                </tbody>
              </table>

我的形象:

Answer 1

您的代码正在生成一个新的 <tbody>对于数组中的每个元素。添加*ngfor表行的结构指令 ( <tr> )。