嵌入式 Table 垂直滚动固定 header
Embedded Table scroll vertical with fixed header
我有一个table嵌在另一个div里面,当然尺寸比外面的div大。我目前正在使用 ScrollToFixed 在滚动时将 header 固定在顶部,并在 table 的内容超出视口时再次保留它。这行得通,但真正丑陋的是,虽然 header-row 是固定的,但它大于内容,因此它在 left/right.
上溢出
请参阅 the Fiddle 它确实按描述工作的地方。
我能想象的是以某种方式设置 table 的固定高度和宽度,并且它应该可以垂直和水平滚动,因为有溢出并且第一行应该在滚动时固定。
$(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>
下面的代码确实像我描述的那样工作。
$(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>
我有一个table嵌在另一个div里面,当然尺寸比外面的div大。我目前正在使用 ScrollToFixed 在滚动时将 header 固定在顶部,并在 table 的内容超出视口时再次保留它。这行得通,但真正丑陋的是,虽然 header-row 是固定的,但它大于内容,因此它在 left/right.
上溢出请参阅 the Fiddle 它确实按描述工作的地方。 我能想象的是以某种方式设置 table 的固定高度和宽度,并且它应该可以垂直和水平滚动,因为有溢出并且第一行应该在滚动时固定。
$(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>
下面的代码确实像我描述的那样工作。
$(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>