html - 表中表丢失表体格式

Question

我有一张工作正常的 table ，但后来又增加了要求。这 滚动表格时，表格标题不应移动。滚动条 应该在不使用浏览器滚动的表格中。我尝试了一些 它做了一件没有实现另一件的事情我不希望卷轴成为 在标题上。它应该在表格标题下。我做到了。
为此，我必须在带有表格的表格中添加表格。我有 实现了我的大部分目标，但由于某种原因我的格式已关闭 幸运地尝试了很多事情。

表格正在运行，但格式设置已关闭。表头和 表格主体在表格单元格中不对齐。我试着改变 标题的宽度或没有运气的单元格。我已经尽力了 想想我会给出前后的图像。

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

表头应与表体对齐。 表头和表体没有对齐

Answer 1

您将两个子表都包含在一个容器表中，但是您没有为此设置 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>