不能将表头和表主体用html对齐,在内存数据中使用angular

时间:2018-12-20 02:23:28

标签: html css angular html-table bootstrap-4

我似乎无法将桌子头与桌子主体对齐。

这是为我的项目制作的网络型学生数据存储数据库。

    <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>

我的图片:

1 个答案:

答案 0 :(得分:0)

您的代码正在为数组中的每个项目生成一个新的<tbody>。将*ngfor结构指令添加到表行(<tr>)。