我有一个工作正常的表，但随后添加了需求。的
滚动表时，表头不应移动。滚动条
应该在表格中而不使用浏览器滚动。我尝试了一些
它所做的一件事却没有实现另一件事，我不希望滚动成为
在标题上。它应该在表格标题下。我做到了。
为此，我必须在一个表中添加一个表。我有
实现了我的大部分目标，但是由于某些原因，格式已关闭
尝试了很多运气。
该表正在工作，但格式已关闭。表头和 表格主体未在表格单元格中对齐。我试图改变 标头的宽度或没有运气的单元格。我已经尽力了 想一想，我会给之前和之后的图像。
<div class="col-lg-12">
<div class="container">
<div class="tableFixHead">
<table class ="table pos-table" style="height: 400px;
overflow-y:auto" cellpadding="0" cellmargin="0"
*ngIf='use && users.length'>
<table class="table" style=" width:100%; position:sticky;
margin-bottom:0">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Last Login</th>
<th>Job Title</th>
<th></th>
</tr>
</thead>
</table>
<div class="scroll">
<table class="table table-hover">
<tbody>
<tr *ngFor= 'let user of users'>
<td>{{user.name}}</td>
<td headers="2">{{user.username}}</td>
<td>{{user.lastlogin | date: 'dd/MMM/yyyy hh:mm
UTC'}}
</td>
<td>{{user.jobtitle}}</td>
<td style="float:right; color:#3C006E"
aria-hidden="true"><i
class="fa fa-envelope" title="Edit
email notification"
style="margin: 0px 10px 0px 0px;
color:#3C006E" arial
hidden="true"> </i>
<i class="fa fa-clone
email-icon"
style="margin-right:
-15px;
color:purple;"
title="Clone
this user
aria-
hidden="true"></i>
</td>
</tr>
</tbody>
</table>
</div>
</table>
</div>
</div>
</div>
.pos-table{
font-family:'Open Sans';
font-size:13px;
margin-left: 80px;
height:300px;
overflow-y:auto;
}
::-webkit-scrollbar {
width: 3px;
margin-right: -10px;
}
scroll {
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
}
表格标题应与表格主体对齐。 表标题和表主体未对齐
答案 0 :(得分：0)
您将两个子表都包含在一个容器表中，但是对此没有tr和td。 在这里：
<div class="col-lg-12">
<div class="container">
<div class="tableFixHead">
<table class ="table pos-table" style="height: 400px;
overflow-y:auto" cellpadding="0" cellmargin="0"
*ngIf='use && users.length'>
<tr><td>
<table class="table" style=" width:100%; position:sticky;
margin-bottom:0 ;border:1px solid red">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Last Login</th>
<th>Job Title</th>
<th></th>
</tr>
</thead>
</table>
</td></tr>
<tr><td>
<div class="scroll">
<table class="table table-hover" colspan=2 style='border:1px solid black'>
<tbody>
<tr *ngFor= 'let user of users'>
<td>{{user.name}}</td>
<td >{{user.username}}</td>
<td>{{user.lastlogin | date: 'dd/MMM/yyyy hh:mm
UTC'}}
</td>
<td>{{user.jobtitle}}</td>
<td style="float:right; color:#3C006E"
aria-hidden="true"><i
class="fa fa-envelope" title="Edit
email notification"
style="margin: 0px 10px 0px 0px;
color:#3C006E" arial
hidden="true"> </i>
<i class="fa fa-clone
email-icon"
style="margin-right:
-15px;
color:purple;"
title="Clone
this user
aria-
hidden="true"></i>
</td>
</tr>
<tr *ngFor= 'let user of users'>
<td>{{user.name}}</td>
<td headers="2">{{user.username}}</td>
<td>{{user.lastlogin | date: 'dd/MMM/yyyy hh:mm
UTC'}}
</td>
<td>{{user.jobtitle}}</td>
<td style="float:right; color:#3C006E"
aria-hidden="true"><i
class="fa fa-envelope" title="Edit
email notification"
style="margin: 0px 10px 0px 0px;
color:#3C006E" arial
hidden="true"> </i>
<i class="fa fa-clone
email-icon"
style="margin-right:
-15px;
color:purple;"
title="Clone
this user
aria-
hidden="true"></i>
</td>
</tr>
</tbody>
</table>
</div>
</td></tr>
</table>
</div>
</div>
</div>