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

时间：2016-09-29 21:25:26

标签： javascript html css scroll css-tables

我有一个嵌入另一个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>

1 个答案:

答案 0 :(得分：0)

以下代码确实有效，正如我所描述的那样应该有效。

＆＃13;
＆＃13; 
$(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);
  
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题