嵌入式表垂直滾動，帶有固定標題

Question

我有一個嵌入在另一個div中的表，當然，其大小大於外部div。 我目前正在使用ScrollToFixed在滾動時將標題固定在頂部，並在表格內容不在視口中時再次保留它。 那行得通，但實際上很丑陋的是，盡管標頭行是固定的，但它大於內容，因此在左/右溢出。

請按照說明操作小提琴 。 我可以想象的是，以某種方式設置了表格的固定高度和寬度，由於溢出，表格應該可以垂直和水平滾動，並且在滾動時應該固定第一行。

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