嵌入式表垂直滚动，带有固定标题

Question

I have a table which is embedded in another div, of course the size is bigger than the outer div. I am currently using ScrollToFixed to fix the header on top while scrolling and leave it again when content of table is out of viewport. That works but what is really ugly is that while header-row is fixed it is greater than the content and so it overflows on left/right.

Please see the Fiddle where it does work as described. What I can imagine is somehow set a fix height and width of the table and it should be vertically and horizontally scrollable as there are overflows and the first row should be fixed on scrolling.

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

Following Code does Work as I described it should work.

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