css 水平滚动的表格，左侧列粘滞，标题粘滞在屏幕顶部

pdkcd3nj 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(165)

我想创建一个表格，它有一个水平滚动条，一个粘滞的左列和一个粘滞的页眉在屏幕的顶部。这个表格很宽，所以我想水平滚动它。但是我需要把左边第一列变成粘性的，我还需要把第一行变成粘性的（header）页面向下滚动时粘在屏幕上方，不知道这两个选项是否兼容，几乎都试过了。这是我最新的代码，几乎可以工作，但是第一行没有和表的其他部分一起滚动，它可能是由div或table元素组成的，这无关紧要。
我想避免使用JavaScript。

body {
  background: #F5F7FA;
  overflow-x: hidden;
}

.wrap {
  position: relative;
  margin: 10em auto 30em;
  max-width: 960px;
  overscroll-behavior: contain;
}

.headers {
  top: 0;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
}

.tracks,
.scroller {
  display: flex;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.scroller {
  overflow-x: hidden;
}

.tracks {
  overflow: auto;
  scroll-snap-type: x mandatory;
}

.scenes::-webkit-scrollbar,
.scroller::-webkit-scrollbar {
  display: none;
}

.track {
  flex: 1 0 calc(22% + 2px);
  scroll-snap-align: start;
}

.track.first {
    position: sticky;
    left: 0;
}

.sticky {
  position: sticky;
  top: 0;
}

.track + .track {
  margin-left: -1px;
}

.heading {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  border: solid #fff;
  border-width: 0 1px;
  z-index: 1;
  background: #efefef;
  font-weight: 700;
}

.entry {
  border: 1px solid #ebebeb;
  border-top: 0;
  background: #fff;
  height: 8em;
  padding: 1em;
}

@media (max-width: 767px) {
  .track {
    flex: 1 0 calc(50% + 7px);
  }
}

<div class="wrap">
  <div class="headers">
    
    <div class="scroller">
      <div class="track">
        <div class="heading">Heading 1</div>
      </div>
      <div class="track">
        <div class="heading">Heading 2</div>
      </div>
      <div class="track">
        <div class="heading">Heading 3</div>
      </div>
      <div class="track">
        <div class="heading">Heading 4</div>
      </div>
      <div class="track">
        <div class="heading">Heading 5</div>
      </div>
    </div>

  </div>

  <div class="tracks">

    <div class="track first">
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
    </div>

    <div class="track">
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
    </div>

    <div class="track">
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
    </div>

    <div class="track">
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
    </div>

    <div class="track">
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
    </div>
   
  </div>
</div>

选项1：标题随表格的其余部分滚动。完全不同的解决方案却有相同的结果。

css

来源：https://stackoverflow.com/questions/75054734/table-with-horizontal-scroll-with-sticky-left-column-and-sticky-header-on-top-of

1条答案

按热度按时间

lsmepo6l1#

这是它应该看起来的样子，但没有使用JavaScript，只有纯CSS。

function scrollSynchronization() {
  const wrapper1 = document.querySelector('.scroller');
  const wrapper2 = document.querySelector('.tracks');

  wrapper1.addEventListener('scroll', function() {
    wrapper2.scrollLeft = wrapper1.scrollLeft;
  });

  wrapper2.addEventListener('scroll', function() {
    wrapper1.scrollLeft = wrapper2.scrollLeft;
  });
}

scrollSynchronization();

body {
  background: #F5F7FA;
  overflow-x: hidden;
}

.wrap {
  position: relative;
  margin: 10em auto 30em;
  max-width: 960px;
}

.headers {
  top: 0;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
}

.tracks,
.scroller {
  display: flex;
  overflow-y: hidden;
}

.scroller {
  overflow-x: scroll;
}

.tracks {
  overflow: auto;
}

.scenes::-webkit-scrollbar,
.scroller::-webkit-scrollbar {
  display: none;
}

.track {
  flex: 1 0 calc(22% + 2px);
}

.track.first {
    position: sticky;
    left: 0;
}

.sticky {
  position: sticky;
  top: 0;
}

.track + .track {
  margin-left: -1px;
}

.heading {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  border: solid #fff;
  border-width: 0 1px;
  z-index: 1;
  background: #efefef;
  font-weight: 700;
}

.entry {
  border: 1px solid #ebebeb;
  border-top: 0;
  background: #fff;
  height: 8em;
  padding: 1em;
}

@media (max-width: 767px) {
  .track {
    flex: 1 0 calc(50% + 7px);
  }
}

<div class="wrap">
  <div class="headers">

    <div class="scroller">
      <div class="track">
        <div class="heading">Heading 1</div>
      </div>
      <div class="track">
        <div class="heading">Heading 2</div>
      </div>
      <div class="track">
        <div class="heading">Heading 3</div>
      </div>
      <div class="track">
        <div class="heading">Heading 4</div>
      </div>
      <div class="track">
        <div class="heading">Heading 5</div>
      </div>
    </div>

  </div>

  <div class="tracks">

    <div class="track first">
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
    </div>

    <div class="track">
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
    </div>

    <div class="track">
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
    </div>

    <div class="track">
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
    </div>

    <div class="track">
      <div class="entry">
        <h3>Lorem, ipsum dolor.</h3>
      </div>
      <div class="entry">
        <h3>Lorem, ipsum.</h3>
      </div>
    </div>
   
  </div>
</div>

赞(0）回复(0）举报 2023-01-14

我来回答

css 水平滚动的表格，左侧列粘滞，标题粘滞在屏幕顶部

1条答案

相关问题

热门标签

最新问答