提问人：mohciniya 提问时间：3/21/2022 最后编辑：isherwoodmohciniya 更新时间：3/21/2022 访问量：136
如何在多个表中对齐列？
How can I align columns across multiple tables?
问：
我想正确对齐，只是桌子的前 2 >位置不完美。
你知道我该如何纠正这个问题吗？<td><td
非常感谢
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>答：
0赞
Alexander Nied
3/21/2022
#1
您似乎已将内容分成两个单独的表，但将它们显示为一个连续的表。如果这是逻辑上属于一起的所有表格数据，只需将其合并到一个表中即可：
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>但是，在查看数据时，每个“表行”的左右两侧都有描述列表 <dl> 元素，其中包含描述术语 <dt> 和描述详细信息 <dd> 对，在语义上可能会更好。
上一个：Angular 中数字格式的空间
下一个：如何在输入中显示值并锁定输入？
评论