嵌入式表格滚动垂直固定标题

Question

我有一个嵌入另一个div的表格，当然这个表格大于外部div。我正在使用ScrollToFixed在滚动时将标题固定在顶部，并且当表格内容超出视口时将其重新保留。这有效，但真正丑陋的是，虽然标题行是固定的，但它比内容更大，因此它左/右溢出。

请参阅the Fiddle它的工作方式如上所述。 我可以想象的是以某种方式设置表格的固定高度和宽度，它应该是垂直和水平滚动的，因为有溢出，第一行应该固定在滚动上。

$(document).ready(function() { 
 
    var scrollLeft = 0; 
 
    var leftRoundingRect = $('.table-body')[0].getBoundingClientRect().left; 
 

 
    $('.sticky').scrollToFixed({ 
 
    limit: $('.user.last').offset().top, 
 
    removeOffsets: true, 
 
    zIndex: 0, 
 
    unfixed: function() { 
 
     $(this).offset({ 
 
     left: leftRoundingRect - scrollLeft 
 
     }); 
 
    } 
 
    }); 
 

 
    $(".table-body").scroll(function() { 
 
    scrollLeft = this.scrollLeft; 
 
    $(".user.sticky").offset({ 
 
     left: leftRoundingRect - scrollLeft 
 
    }); 
 
    }); 
 
});

.tab { 
 
    padding: 20px; 
 
    border: 1px solid lightgray; 
 
} 
 

 
.inner-content { 
 
    overflow: hidden; 
 
    padding: 0 10px 0 10px; 
 
} 
 

 
.table-body { 
 
    overflow: auto; 
 
} 
 

 
.users { 
 
    white-space: nowrap; 
 
    font-size: 0; 
 
} 
 

 
.user { 
 
    font-size: 0; 
 
    border-bottom: 1px solid #d3d3d3; 
 
    border-left: 1px solid #d3d3d3; 
 
    color: #555; 
 
    width: 750px; 
 
} 
 

 
.user.odd { 
 
    background: #f4f5f7; 
 
} 
 

 
.sticky { 
 
    background: grey; 
 
} 
 

 
.bold { 
 
    color: #fff; 
 
    font-weight: 600; 
 
} 
 

 
.company, 
 
.firstName, 
 
.lastName, 
 
.roles { 
 
    font-size: 18px; 
 
    border-right: 1px solid lightgray; 
 
    display: inline-block; 
 
    width: 150px; 
 
    padding: 10px; 
 
    overflow: scroll; 
 
    white-space: nowrap; 
 
}

<div class="tab"> 
 
    <div class="inner-content"> 
 
    <div class="users"> 
 
     <div class="user sticky"> 
 
     <div class="firstName bold">First</div> 
 
     <div class="lastName bold">Last</div> 
 
     <div class="roles bold">Role</div> 
 
     <div class="company bold">Company</div> 
 
     </div> 
 
     <div class="table-body"> 
 
     <div class="user"> 
 
      <div class="firstName">Max</div> 
 
      <div class="lastName">Mustermann</div> 
 
      <div class="roles">admin</div> 
 
      <div class="company">HP</div> 
 
     </div> 
 
     <div class="user odd"> 
 
      <div class="firstName">Melanie</div> 
 
      <div class="lastName">Musterfrau</div> 
 
      <div class="roles">readonly</div> 
 
      <div class="company">IBM</div> 
 
     </div> 
 
     <div class="user"> 
 
      <div class="firstName">Max</div> 
 
      <div class="lastName">Mustermann</div> 
 
      <div class="roles">admin</div> 
 
      <div class="company">HP</div> 
 
     </div> 
 
     <div class="user odd"> 
 
      <div class="firstName">Melanie</div> 
 
      <div class="lastName">Musterfrau</div> 
 
      <div class="roles">readonly</div> 
 
      <div class="company">IBM</div> 
 
     </div> 
 
     <div class="user"> 
 
      <div class="firstName">Max</div> 
 
      <div class="lastName">Mustermann</div> 
 
      <div class="roles">admin</div> 
 
      <div class="company">HP</div> 
 
     </div> 
 
     <div class="user odd"> 
 
      <div class="firstName">Melanie</div> 
 
      <div class="lastName">Musterfrau</div> 
 
      <div class="roles">readonly</div> 
 
      <div class="company">IBM</div> 
 
     </div> 
 
     <div class="user last"> 
 
      <div class="firstName">Test</div> 
 
      <div class="lastName">Tester</div> 
 
      <div class="roles">contributor</div> 
 
      <div class="company">SAP</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div style="display:inline-block; height: 1000px; padding-top:50px;">Let's Scroll Baby 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://bigspotteddog.github.io/ScrollToFixed/jquery-scrolltofixed-min.js"></script>

Answer 1

下面的代码不工作，因为我描述它应该工作。

$(document).ready(function() { 
 
    var scrollLeft = 0; 
 
    var leftRoundingRect = $('.table-body')[0].getBoundingClientRect().left; 
 

 
    $(".table-body").scroll(function() { 
 
    scrollLeft = this.scrollLeft; 
 
    $(".user.sticky").offset({ 
 
     left: leftRoundingRect - scrollLeft 
 
    }); 
 
    }); 
 
    
 
    $(".user").width($(".table-body").get(0).scrollWidth - 1); 
 
    
 
});

.tab { 
 
    padding: 20px; 
 
    border: 1px solid lightgray; 
 
    width:220px; 
 
} 
 
.inner-content { 
 
    padding: 0 10px 0 10px; 
 
    width:200px; 
 
} 
 
.header { 
 
    overflow: hidden; 
 
} 
 
.table-body { 
 
    overflow: auto; 
 
    height: 100px; 
 
} 
 
.users { 
 
    white-space: nowrap; 
 
    font-size: 0; 
 
} 
 
.user { 
 
    font-size: 0; 
 
    border-bottom: 1px solid #d3d3d3; 
 
    border-left: 1px solid #d3d3d3; 
 
    color: #555; 
 
    width: 750px; 
 
} 
 
.user.odd { 
 
    background: #f4f5f7; 
 
} 
 
.sticky { 
 
    background: grey; 
 
} 
 
.bold { 
 
    color: #fff; 
 
    font-weight: 600; 
 
} 
 
.company, 
 
.firstName, 
 
.lastName, 
 
.roles { 
 
    font-size: 18px; 
 
    border-right: 1px solid lightgray; 
 
    display: inline-block; 
 
    width: 150px; 
 
    padding: 10px; 
 
    overflow: scroll; 
 
    white-space: nowrap; 
 
}

<div style="display:inline-block; height: 200px; padding-top:50px;">Other Content 
 
</div> 
 
<div class="tab"> 
 
    <div class="inner-content"> 
 
    <div class="header"> 
 
     <div class="user sticky"> 
 
     <div class="firstName bold">First</div> 
 
     <div class="lastName bold">Last</div> 
 
     <div class="roles bold">Role</div> 
 
     <div class="company bold">Company</div> 
 
     </div> 
 
    </div> 
 
    <div class="table-body"> 
 
     <div class="user"> 
 
     <div class="firstName">Max</div> 
 
     <div class="lastName">Mustermann</div> 
 
     <div class="roles">admin</div> 
 
     <div class="company">HP</div> 
 
     </div> 
 
     <div class="user odd"> 
 
     <div class="firstName">Melanie</div> 
 
     <div class="lastName">Musterfrau</div> 
 
     <div class="roles">readonly</div> 
 
     <div class="company">IBM</div> 
 
     </div> 
 
     <div class="user"> 
 
     <div class="firstName">Max</div> 
 
     <div class="lastName">Mustermann</div> 
 
     <div class="roles">admin</div> 
 
     <div class="company">HP</div> 
 
     </div> 
 
     <div class="user odd"> 
 
     <div class="firstName">Melanie</div> 
 
     <div class="lastName">Musterfrau</div> 
 
     <div class="roles">readonly</div> 
 
     <div class="company">IBM</div> 
 
     </div> 
 
     <div class="user"> 
 
     <div class="firstName">Max</div> 
 
     <div class="lastName">Mustermann</div> 
 
     <div class="roles">admin</div> 
 
     <div class="company">HP</div> 
 
     </div> 
 
     <div class="user odd"> 
 
     <div class="firstName">Melanie</div> 
 
     <div class="lastName">Musterfrau</div> 
 
     <div class="roles">readonly</div> 
 
     <div class="company">IBM</div> 
 
     </div> 
 
     <div class="user last"> 
 
     <div class="firstName">Test</div> 
 
     <div class="lastName">Tester</div> 
 
     <div class="roles">contributor</div> 
 
     <div class="company">SAP</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div style="display:inline-block; height: 200px; padding-top:50px;">Other Content 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>