Таблица в таблице в таблице теряет форматирование таблицы

Question

У меня была таблица, которая работала нормально, но затем были добавлены требования.Заголовок таблицы не должен перемещаться при прокрутке таблицы.Полоса прокрутки должна находиться в таблице, не используя прокрутку браузера.Я попробовал несколько вещей, которые он сделал один без достижения другого, я не хочу, чтобы свиток был в заголовке.Это должно быть под заголовком таблицы.Я добился этого.
Для этого мне пришлось добавить таблицу в таблицу, в которой находится таблица.Я достиг большей части своей цели, но форматирование по какой-то причине отключено. Я попробовал несколько вещей с удачей.

Таблица работает, но форматирование выключено.Заголовок и тело таблицы не совпадают в ячейках таблицы.Я безуспешно пытался изменить ширину заголовка или ячеек.Я перепробовал все, что смогу придумать, я дам изображение до и после.

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