如何对齐多个表中的列？

Question

我想正确对齐 <td>，只是 table 的前 2 个 <td> 位置不正确。你知道我该如何纠正这个问题吗？

非常感谢

illustration

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   </head>
   <body>
      <div class="pt-3 container">
         <div class="card" style="width: 60%">
            <div class="card-body">
               <div class="row">
                  <div class="col">
                     <table class="table table-hover table-striped spaceLeft">
                        <tbody>
                           <ng-container *ngFor="let element of dta.PTF_DTA">
                              <tr>
                                 <th>Année Exercice</th>
                                 <td>2022</td>
                              </tr>
                              <tr>
                                 <th>Pays formulaire DTA</th>
                                 <td>4</td>
                              </tr>
                           </ng-container>
                        </tbody>
                     </table>
                     <table class="table table-hover table-striped spaceLeft">
                        <tbody>
                           <ng-container *ngFor="let element of dta.PTF_DTA">
                              <tr>
                                 <th>Registre national</th>
                                 <td>123</td>
                              </tr>
                              <tr>
                                 <th>Nom</th>
                                 <td>PERSONNE PHYSIQUE 47818</td>
                              </tr>
                              <tr>
                                 <th>Prénom</th>
                                 <td>PERSONNE PHYSIQUE 47818</td>
                              </tr>
                              <tr>
                                 <th>Lieu de Naissance</th>
                                 <td>XXXXXXXXX</td>
                              </tr>
                              <tr>
                                 <th>Date de Naissance</th>
                                 <td>01/01/0001</td>
                              </tr>
                              <tr>
                                 <th>Pays de la residence fiscale</th>
                                 <td>BEL</td>
                              </tr>
                           </ng-container>
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Answer 1

您似乎已将内容分成两个单独的 table，但将它们显示为一个连续的 table。如果这是逻辑上属于一起的所有表格数据，只需将它们组合成一个 table:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   </head>
   <body>
      <div class="pt-3 container">
         <div class="card" style="width: 60%">
            <div class="card-body">
               <div class="row">
                  <div class="col">
                     <table class="table table-hover table-striped spaceLeft">
                        <tbody>
                           <ng-container *ngFor="let element of dta.PTF_DTA">
                              <tr>
                                 <th>Année Exercice</th>
                                 <td>2022</td>
                              </tr>
                              <tr>
                                 <th>Pays formulaire DTA</th>
                                 <td>4</td>
                              </tr>
                           </ng-container>
                           <ng-container *ngFor="let element of dta.PTF_DTA">
                              <tr>
                                 <th>Registre national</th>
                                 <td>123</td>
                              </tr>
                              <tr>
                                 <th>Nom</th>
                                 <td>PERSONNE PHYSIQUE 47818</td>
                              </tr>
                              <tr>
                                 <th>Prénom</th>
                                 <td>PERSONNE PHYSIQUE 47818</td>
                              </tr>
                              <tr>
                                 <th>Lieu de Naissance</th>
                                 <td>XXXXXXXXX</td>
                              </tr>
                              <tr>
                                 <th>Date de Naissance</th>
                                 <td>01/01/0001</td>
                              </tr>
                              <tr>
                                 <th>Pays de la residence fiscale</th>
                                 <td>BEL</td>
                              </tr>
                           </ng-container>
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

但是，查看数据，在每个“table 行”的左侧和右侧使用 description list <dl> element with description term <dt> and description detail <dd> 对之类的语义可能会更好地为您提供服务。

如何对齐多个表中的列？

How can I align columns across multiple tables?

bootstrap-4