Angular+HTML/CSS多列滚动表格布局异常问题求助

你的问题根源在于之前为单列表格写的CSS里，把tr、td、th都设置成了display:block——这在单列表格时能凑效，但多列表格会直接破坏表格的列布局，导致所有单元格都独占一行，自然没法正常显示四列。

要实现表头固定、tbody滚动、列宽均匀对齐的效果，我们需要保留表格的原生列结构，同时只让tbody区域可滚动。下面是调整后的解决方案：

修改后的CSS代码 #

table {
  -webkit-border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  border-radius: 8px !important;
  background-color: rgba(245, 245, 245, 0.644);
  color: black;
  width: 100%;
  table-layout: fixed; /* 固定表格布局，让列宽均匀分配 */
  border-collapse: collapse; /* 合并边框，避免间隙 */
}

thead {
  background-color: rgb(245, 245, 245);
  color: black;
}

thead tr {
  display: table-row; /* 保留原生行结构 */
}

thead th {
  width: 25%; /* 四列各占25%，可根据需求调整 */
  text-align: center;
  padding: 8px;
}

tbody {
  display: block;
  overflow-y: auto;
  height: 350px; /* 滚动区域固定高度 */
  width: 100%;
}

tbody tr {
  display: table-row; /* 保留原生行结构，保证列对齐 */
}

tbody td {
  width: 25%; /* 和表头宽度对应，确保列对齐 */
  text-align: center;
  padding: 8px;
}

/* 可选：美化滚动条样式 */
tbody::-webkit-scrollbar {
  width: 6px;
}

tbody::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}

对应的HTML代码（无需大幅修改） #

<table class="table table-striped table-hover">
 <thead>
 <tr>
 <th>E-mail</th>
 <th>Voornaam</th>
 <th>Achternaam</th>
 <th>Delete</th>
 </tr>
 </thead>
 <tbody>
 <tr *ngFor="let user of users | filterPipeUsers: searchToken">
 <td (click)="SpecificUser(user.userId)">{{user.username}}</td>
 <td (click)="SpecificUser(user.userId)">{{user.firstName}}</td>
 <td (click)="SpecificUser(user.userId)">{{user.lastName}}</td>
 <td><a (click)="Debug()"><img class="delete" src="https://cdn4.iconfinder.com/data/icons/controls-add-on-flat/48/Contols_-_Add_On-35-512.png" /></a>
 </td>
 </tr>
 </tbody>
</table>

关键说明 #

1. table-layout: fixed：强制表格按设定的列宽分配空间，避免内容撑开列宽，保证表头和tbody的列完全对齐。
2. 仅给tbody设置display:block，让它成为可滚动的块级元素，而thead和内部的tr保持原生表格布局，这样表头就能固定在顶部。
3. 统一设置th和td的宽度（四列各25%），确保列宽均匀且占满表格宽度。
4. 保留tr的display:table-row，维持表格的行结构，让多列正常排列。

这样修改后，你的四列表格就能实现上下滚动、表头固定、列对齐且宽度均匀的效果了，同时完全兼容Angular的*ngFor循环渲染。

内容的提问来源于stack exchange，提问作者Bmhbakker