html 如何实现粘性和水平滚动表头

tldr：试试下面的代码片段，有没有一种方法可以不用（或用更少的）js来实现它？
我得到了一些UI，有几个要求：

具有粘性顶部标题的表
内容相当广泛，所以整个东西需要水平滚动
它将被插入到一个页面中，周围有一些内容。如果用户正在查看表格，则应该隐藏上面和下面的内容
应该只有一个滚动条，用户不需要从页面中单独滚动表格。

我试着只使用postition: sticky和overflow-x: scroll，但似乎标题只粘在水平滚动的容器上，它不粘在视口上。
我目前的想法是在文档中有两个容器，与其他内容处于同一级别。但这意味着我必须同步水平滚动位置并将表格单元格的大小传播到标题。（下面的演示没有做到这一点，因为我硬编码了单元格的宽度。）
有没有更好的方法来做到这一点？最好不使用（或少用）js？

const header = document.querySelector(".header");
const grid = document.querySelector(".grid");
let updating = false;

grid.addEventListener("scroll", () => {
  if (header.scrollLeft === grid.scrollLeft) return;
  // console.log("grid -> header");

  header.scrollLeft = grid.scrollLeft;
});

header.addEventListener("scroll", () => {
  if (header.scrollLeft === grid.scrollLeft) return;
  // console.log("header -> grid");

  grid.scrollLeft = header.scrollLeft;
});

.content {
  max-width: 60rem;
  margin: 0 auto;
  background-color: rgb(240, 245, 255);
}

.header {
  display: flex;
  flex-direction: row;
  max-width: 100%;
  overflow: scroll auto;
  position: sticky;
  top: 0;
}

.header-cell {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  background-color: rgb(220, 185, 255);
}

.header-cell:nth-child(2n) {
  background-color: rgb(255, 179, 249);
}

.grid {
  display: grid;
  grid-template-columns: repeat(20, auto);
  max-width: 100%;
  overflow: scroll auto;
}

.grid-cell {
  width: 100px;
  height: 100px;
  background-color: rgb(188, 255, 185);
}

.grid-cell:nth-child(3n) {
  background-color: rgb(213, 255, 229);
}

.grid-cell:nth-child(3n + 1) {
  background-color: rgb(212, 255, 182);
}

<div class="content">
  <p>
    Dicta maiores adipisci debitis sit velit deserunt expedita! Repellat similique error pariatur corrupti dolores itaque quam voluptates harum ipsa. Excepturi!
  </p>
  <p>
    Obcaecati consequuntur adipisci qui, sint earum omnis odio voluptas facere consequatur maxime ea cumque, doloremque dolore laborum iste, suscipit nostrum?
  </p>
  <p>
    Ducimus architecto tempore magni quae, reiciendis mollitia fuga harum minus perspiciatis explicabo eius, reprehenderit at voluptates temporibus, atque quis blanditiis?
  </p>
  <p>
    Modi illum, eveniet quidem ad neque impedit unde distinctio atque, corporis, earum at exercitationem dolor doloribus suscipit adipisci ducimus omnis.
  </p>
  <p>
    Voluptas impedit nostrum velit odit. Voluptatibus, nemo. Quas eveniet ad architecto aliquid perferendis illum perspiciatis obcaecati facilis. Accusantium, accusamus! Corrupti!
  </p>
  <p>
    Porro commodi quisquam numquam, nam laboriosam magnam eos voluptatem doloribus voluptate minima asperiores, aliquid non velit repudiandae, voluptatibus rerum debitis.
  </p>
  <p>
    Et deleniti totam, consectetur aliquam sed quisquam odit quia cum omnis obcaecati maxime quis! Saepe eum explicabo doloremque tenetur amet?
  </p>
  <p>
    Dolorum in debitis labore eum, neque voluptas necessitatibus? Vero placeat officia ipsum nam quisquam possimus eum excepturi quis dignissimos voluptatem.
  </p>

  <div class="sticky-container">
    <div class="header">
      <div class="header-cell">Lorem, ipsum.</div>
      <div class="header-cell">Sapiente, eius.</div>
      <div class="header-cell">Doloribus, veritatis.</div>
      <div class="header-cell">Mollitia, hic.</div>
      <div class="header-cell">Blanditiis, eligendi.</div>
      <div class="header-cell">Eius, cupiditate!</div>
      <div class="header-cell">Facere, harum!</div>
      <div class="header-cell">Eum, fugit.</div>
      <div class="header-cell">Quod, dolore!</div>
      <div class="header-cell">Doloribus, amet?</div>
      <div class="header-cell">Pariatur, inventore.</div>
      <div class="header-cell">Distinctio, esse?</div>
      <div class="header-cell">Reiciendis, delectus.</div>
      <div class="header-cell">Tempora, corrupti.</div>
      <div class="header-cell">Iure, architecto!</div>
      <div class="header-cell">Iste, adipisci.</div>
      <div class="header-cell">Temporibus, sunt.</div>
      <div class="header-cell">Voluptatibus, repellendus!</div>
      <div class="header-cell">Quibusdam, autem.</div>
      <div class="header-cell">Tempora, magnam!</div>
    </div>

    <div class="grid">
      <div class="grid-cell">Lorem, ipsum.</div>
      <div class="grid-cell">Aliquid, reprehenderit?</div>
      <div class="grid-cell">Nesciunt, eaque?</div>
      <div class="grid-cell">Labore, illo.</div>
      <div class="grid-cell">Reiciendis, eius!</div>
      <div class="grid-cell">Nesciunt, id.</div>
      <div class="grid-cell">Nam, velit!</div>
      <div class="grid-cell">Ipsam, quas.</div>
      <div class="grid-cell">Natus, corrupti!</div>
      <div class="grid-cell">Minus, tempora.</div>
      <div class="grid-cell">Delectus, aliquid.</div>
      <div class="grid-cell">Molestiae, sapiente!</div>
      <div class="grid-cell">Eius, quaerat!</div>
      <div class="grid-cell">Iure, aperiam?</div>
      <div class="grid-cell">Laudantium, deserunt?</div>
      <div class="grid-cell">Ipsam, libero!</div>
      <div class="grid-cell">Fugit, dicta!</div>
      <div class="grid-cell">Repellat, ea.</div>
      <div class="grid-cell">Impedit, ipsa.</div>
      <div class="grid-cell">Quas, libero?</div>
      <div class="grid-cell">Doloremque, minima!</div>
      <div class="grid-cell">Commodi, aspernatur?</div>
      <div class="grid-cell">Laboriosam, provident.</div>
      <div class="grid-cell">Doloribus, dolores.</div>
      <div class="grid-cell">A, ratione?</div>
      <div class="grid-cell">Tempore, perferendis?</div>
      <div class="grid-cell">Cupiditate, quo.</div>
      <div class="grid-cell">Cum, maiores.</div>
      <div class="grid-cell">Atque, reiciendis!</div>
      <div class="grid-cell">Eaque, a.</div>
      <div class="grid-cell">Tempore, modi.</div>
      <div class="grid-cell">Alias, qui.</div>
      <div class="grid-cell">Ad, voluptates?</div>
      <div class="grid-cell">Reprehenderit, unde.</div>
      <div class="grid-cell">Provident, autem!</div>
      <div class="grid-cell">Possimus, quidem.</div>
      <div class="grid-cell">Sapiente, soluta.</div>
      <div class="grid-cell">Possimus, in.</div>
      <div class="grid-cell">Non, incidunt?</div>
      <div class="grid-cell">In, unde.</div>
      <div class="grid-cell">Tempora, enim.</div>
      <div class="grid-cell">Amet, quaerat?</div>
      <div class="grid-cell">Molestias, deserunt!</div>
      <div class="grid-cell">Nihil, quis.</div>
      <div class="grid-cell">Commodi, provident!</div>
      <div class="grid-cell">Inventore, quibusdam.</div>
      <div class="grid-cell">Velit, accusamus!</div>
      <div class="grid-cell">Culpa, possimus.</div>
      <div class="grid-cell">Magni, ipsum.</div>
      <div class="grid-cell">Dolore, veniam.</div>
      <div class="grid-cell">Molestiae, eius.</div>
      <div class="grid-cell">Aut, iusto!</div>
      <div class="grid-cell">Magni, tempora.</div>
      <div class="grid-cell">Vel, sunt.</div>
      <div class="grid-cell">Odit, consequatur!</div>
      <div class="grid-cell">Ipsam, officiis!</div>
      <div class="grid-cell">Delectus, veniam.</div>
      <div class="grid-cell">Accusantium, beatae.</div>
      <div class="grid-cell">Quod, repudiandae!</div>
      <div class="grid-cell">Nostrum, impedit?</div>
      <div class="grid-cell">Quas, veniam.</div>
      <div class="grid-cell">Corrupti, officia.</div>
      <div class="grid-cell">Eveniet, odit.</div>
      <div class="grid-cell">Necessitatibus, officia?</div>
      <div class="grid-cell">Alias, magni.</div>
      <div class="grid-cell">Tempore, voluptas.</div>
      <div class="grid-cell">Molestiae, voluptatum?</div>
      <div class="grid-cell">Necessitatibus, rem.</div>
      <div class="grid-cell">Sequi, molestiae.</div>
      <div class="grid-cell">Impedit, accusantium.</div>
      <div class="grid-cell">Dolorem, autem.</div>
      <div class="grid-cell">Laborum, reprehenderit.</div>
      <div class="grid-cell">Ea, dolor.</div>
      <div class="grid-cell">Dolorem, quos.</div>
      <div class="grid-cell">Dolorem, cupiditate!</div>
      <div class="grid-cell">Perferendis, optio?</div>
      <div class="grid-cell">Asperiores, natus!</div>
      <div class="grid-cell">Ad, at?</div>
      <div class="grid-cell">Quibusdam, earum!</div>
      <div class="grid-cell">Enim, saepe?</div>
      <div class="grid-cell">Ad, laudantium!</div>
      <div class="grid-cell">Sit, minus.</div>
      <div class="grid-cell">Ratione, repellendus.</div>
      <div class="grid-cell">Nobis, tempora.</div>
      <div class="grid-cell">Aliquam, commodi?</div>
      <div class="grid-cell">Est, dicta!</div>
      <div class="grid-cell">Iure, nihil?</div>
      <div class="grid-cell">Reprehenderit, quod.</div>
      <div class="grid-cell">Cupiditate, natus?</div>
      <div class="grid-cell">Accusamus, ducimus!</div>
      <div class="grid-cell">Hic, commodi.</div>
      <div class="grid-cell">Quia, recusandae.</div>
      <div class="grid-cell">Optio, laudantium?</div>
      <div class="grid-cell">Quam, ducimus.</div>
      <div class="grid-cell">Necessitatibus, enim?</div>
      <div class="grid-cell">Molestias, neque.</div>
      <div class="grid-cell">Esse, ratione!</div>
      <div class="grid-cell">Non, quia!</div>
      <div class="grid-cell">Harum, a.</div>
      <div class="grid-cell">Nulla, vero?</div>
      <div class="grid-cell">Ab, dolore.</div>
      <div class="grid-cell">Ex, earum.</div>
      <div class="grid-cell">Ullam, autem!</div>
      <div class="grid-cell">Porro, inventore.</div>
      <div class="grid-cell">Velit, ipsa?</div>
      <div class="grid-cell">Illum, itaque.</div>
      <div class="grid-cell">Quia, impedit!</div>
      <div class="grid-cell">Molestiae, nihil.</div>
      <div class="grid-cell">Sequi, officia!</div>
      <div class="grid-cell">Numquam, maxime?</div>
      <div class="grid-cell">Nemo, repudiandae.</div>
      <div class="grid-cell">Libero, ut!</div>
      <div class="grid-cell">Et, recusandae.</div>
      <div class="grid-cell">Porro, ea.</div>
      <div class="grid-cell">Eaque, eos.</div>
      <div class="grid-cell">Rerum, voluptas.</div>
      <div class="grid-cell">Voluptatibus, ab?</div>
      <div class="grid-cell">Quasi, numquam!</div>
      <div class="grid-cell">Tenetur, non.</div>
      <div class="grid-cell">Recusandae, repudiandae.</div>
      <div class="grid-cell">Et, voluptate?</div>
      <div class="grid-cell">Enim, recusandae.</div>
      <div class="grid-cell">Repellendus, veniam.</div>
      <div class="grid-cell">Error, eum!</div>
      <div class="grid-cell">Quo, cupiditate.</div>
      <div class="grid-cell">Aspernatur, vel?</div>
      <div class="grid-cell">Vero, officiis!</div>
      <div class="grid-cell">Veniam, maiores.</div>
      <div class="grid-cell">Quis, repellendus.</div>
      <div class="grid-cell">Laudantium, corrupti.</div>
      <div class="grid-cell">Tempore, nostrum!</div>
      <div class="grid-cell">Unde, reiciendis.</div>
      <div class="grid-cell">Id, nihil!</div>
      <div class="grid-cell">Ex, aliquam.</div>
      <div class="grid-cell">Magnam, placeat?</div>
      <div class="grid-cell">Laborum, inventore?</div>
      <div class="grid-cell">Quae, ab.</div>
      <div class="grid-cell">Qui, alias!</div>
      <div class="grid-cell">Quas, ab?</div>
      <div class="grid-cell">Dolores, exercitationem?</div>
      <div class="grid-cell">Quos, autem.</div>
      <div class="grid-cell">Quibusdam, nostrum.</div>
      <div class="grid-cell">Ipsam, est?</div>
      <div class="grid-cell">Optio, molestiae.</div>
      <div class="grid-cell">Voluptates, incidunt.</div>
      <div class="grid-cell">Eligendi, ipsa.</div>
      <div class="grid-cell">Vel, fuga!</div>
      <div class="grid-cell">Neque, architecto?</div>
      <div class="grid-cell">Neque, optio!</div>
      <div class="grid-cell">Magnam, hic.</div>
      <div class="grid-cell">Aut, molestias.</div>
      <div class="grid-cell">Expedita, laudantium.</div>
      <div class="grid-cell">Accusantium, placeat.</div>
      <div class="grid-cell">Ipsa, non?</div>
      <div class="grid-cell">Quam, labore!</div>
      <div class="grid-cell">Corporis, debitis.</div>
      <div class="grid-cell">Numquam, sed?</div>
      <div class="grid-cell">Rerum, consequatur.</div>
      <div class="grid-cell">Illo, natus?</div>
      <div class="grid-cell">Impedit, dolorum!</div>
      <div class="grid-cell">Dolorem, obcaecati.</div>
      <div class="grid-cell">Explicabo, soluta!</div>
      <div class="grid-cell">Voluptates, reprehenderit?</div>
      <div class="grid-cell">Ex, repellendus?</div>
      <div class="grid-cell">Doloremque, sapiente!</div>
      <div class="grid-cell">Vero, esse!</div>
      <div class="grid-cell">Asperiores, quidem!</div>
      <div class="grid-cell">Similique, illo!</div>
      <div class="grid-cell">Soluta, asperiores?</div>
      <div class="grid-cell">Magnam, modi!</div>
      <div class="grid-cell">Hic, possimus.</div>
      <div class="grid-cell">Quod, deleniti.</div>
      <div class="grid-cell">Repellat, eius?</div>
      <div class="grid-cell">Dignissimos, laboriosam.</div>
      <div class="grid-cell">Odio, inventore.</div>
      <div class="grid-cell">Quidem, esse.</div>
      <div class="grid-cell">Quo, ipsum?</div>
      <div class="grid-cell">Optio, impedit.</div>
      <div class="grid-cell">Cumque, est!</div>
      <div class="grid-cell">Iure, officia?</div>
      <div class="grid-cell">Sit, ad!</div>
      <div class="grid-cell">Distinctio, deleniti?</div>
      <div class="grid-cell">Neque, deleniti!</div>
      <div class="grid-cell">Aut, nostrum.</div>
      <div class="grid-cell">Cumque, iusto.</div>
      <div class="grid-cell">Ut, optio.</div>
      <div class="grid-cell">Quasi, debitis.</div>
      <div class="grid-cell">Quas, repellat.</div>
      <div class="grid-cell">Facere, debitis?</div>
      <div class="grid-cell">Quae, praesentium.</div>
      <div class="grid-cell">Repellat, perspiciatis?</div>
      <div class="grid-cell">Nemo, in.</div>
      <div class="grid-cell">Error, eum.</div>
      <div class="grid-cell">Dicta, corrupti.</div>
      <div class="grid-cell">Distinctio, recusandae!</div>
      <div class="grid-cell">Obcaecati, quis!</div>
      <div class="grid-cell">Iusto, repellat!</div>
      <div class="grid-cell">Illo, repellendus!</div>
      <div class="grid-cell">Labore, ut.</div>
      <div class="grid-cell">Quam, amet.</div>
      <div class="grid-cell">Mollitia, iure!</div>
      <div class="grid-cell">Recusandae, delectus!</div>
      <div class="grid-cell">Suscipit, quod!</div>
      <div class="grid-cell">Quaerat, omnis!</div>
      <div class="grid-cell">Placeat, sunt.</div>
      <div class="grid-cell">Sint, possimus!</div>
      <div class="grid-cell">Aspernatur, explicabo.</div>
      <div class="grid-cell">Asperiores, provident!</div>
      <div class="grid-cell">Aliquid, facilis.</div>
      <div class="grid-cell">Totam, adipisci?</div>
      <div class="grid-cell">Temporibus, labore.</div>
      <div class="grid-cell">Qui, placeat.</div>
      <div class="grid-cell">Accusamus, repellendus.</div>
      <div class="grid-cell">Adipisci, molestias.</div>
      <div class="grid-cell">Tempora, laudantium.</div>
      <div class="grid-cell">Omnis, accusantium?</div>
      <div class="grid-cell">Esse, eius!</div>
      <div class="grid-cell">Possimus, perspiciatis!</div>
      <div class="grid-cell">Distinctio, provident.</div>
      <div class="grid-cell">Aliquam, corporis.</div>
      <div class="grid-cell">Delectus, similique?</div>
      <div class="grid-cell">Quod, facilis.</div>
      <div class="grid-cell">Repudiandae, ex.</div>
      <div class="grid-cell">Tempore, illo.</div>
      <div class="grid-cell">Pariatur, cum?</div>
      <div class="grid-cell">Et, nemo.</div>
      <div class="grid-cell">Illo, nam!</div>
      <div class="grid-cell">Maiores, vero.</div>
      <div class="grid-cell">Ipsum, quae!</div>
      <div class="grid-cell">Est, sit.</div>
      <div class="grid-cell">Voluptates, quis?</div>
      <div class="grid-cell">Quaerat, voluptates?</div>
      <div class="grid-cell">Enim, ea.</div>
      <div class="grid-cell">Consectetur, quod.</div>
      <div class="grid-cell">Cum, aspernatur?</div>
      <div class="grid-cell">Eligendi, tempore!</div>
      <div class="grid-cell">Iste, nesciunt.</div>
      <div class="grid-cell">Dolor, molestiae.</div>
      <div class="grid-cell">Fugiat, maxime?</div>
      <div class="grid-cell">Accusamus, perspiciatis.</div>
      <div class="grid-cell">Aperiam, itaque.</div>
      <div class="grid-cell">Maiores, aut!</div>
      <div class="grid-cell">Iste, nemo?</div>
      <div class="grid-cell">Omnis, eius!</div>
      <div class="grid-cell">Corporis, eligendi.</div>
      <div class="grid-cell">Quos, minima?</div>
      <div class="grid-cell">Iusto, reiciendis.</div>
      <div class="grid-cell">Inventore, explicabo!</div>
      <div class="grid-cell">Mollitia, voluptatem.</div>
      <div class="grid-cell">Odit, aliquam!</div>
      <div class="grid-cell">Fugiat, ducimus.</div>
      <div class="grid-cell">Nam, quos.</div>
      <div class="grid-cell">Temporibus, distinctio?</div>
      <div class="grid-cell">Sapiente, assumenda.</div>
      <div class="grid-cell">Nobis, accusamus!</div>
      <div class="grid-cell">Enim, tenetur?</div>
      <div class="grid-cell">Inventore, deserunt.</div>
      <div class="grid-cell">Assumenda, nesciunt!</div>
      <div class="grid-cell">Impedit, ratione?</div>
      <div class="grid-cell">Perferendis, neque.</div>
      <div class="grid-cell">Pariatur, animi?</div>
      <div class="grid-cell">Cumque, fugiat?</div>
      <div class="grid-cell">Cupiditate, iste.</div>
      <div class="grid-cell">Totam, et.</div>
      <div class="grid-cell">Officiis, ex!</div>
      <div class="grid-cell">Autem, voluptate!</div>
      <div class="grid-cell">Ea, sint!</div>
      <div class="grid-cell">Ipsa, quaerat!</div>
      <div class="grid-cell">Veniam, perferendis.</div>
      <div class="grid-cell">Quaerat, quam.</div>
      <div class="grid-cell">Dolorem, consequuntur.</div>
      <div class="grid-cell">Corporis, consequatur.</div>
      <div class="grid-cell">Impedit, quod.</div>
      <div class="grid-cell">Dolor, laudantium.</div>
      <div class="grid-cell">Blanditiis, in?</div>
      <div class="grid-cell">Sint, ad.</div>
      <div class="grid-cell">Nemo, quo?</div>
      <div class="grid-cell">Blanditiis, ducimus.</div>
      <div class="grid-cell">Molestias, facilis?</div>
      <div class="grid-cell">Dolorem, quae.</div>
      <div class="grid-cell">Illo, facilis.</div>
      <div class="grid-cell">Numquam, illum!</div>
      <div class="grid-cell">Porro, delectus!</div>
      <div class="grid-cell">Facere, soluta.</div>
      <div class="grid-cell">Omnis, repellendus!</div>
      <div class="grid-cell">Inventore, expedita.</div>
      <div class="grid-cell">Maxime, maiores.</div>
      <div class="grid-cell">Odit, vero?</div>
      <div class="grid-cell">Reiciendis, possimus.</div>
      <div class="grid-cell">Voluptatibus, inventore!</div>
      <div class="grid-cell">Voluptate, ab?</div>
      <div class="grid-cell">Labore, eius!</div>
      <div class="grid-cell">Aliquid, ipsam!</div>
      <div class="grid-cell">Ex, eligendi.</div>
      <div class="grid-cell">Exercitationem, optio!</div>
      <div class="grid-cell">Cupiditate, blanditiis.</div>
      <div class="grid-cell">Minima, consectetur.</div>
      <div class="grid-cell">Necessitatibus, et.</div>
      <div class="grid-cell">Deserunt, dicta!</div>
      <div class="grid-cell">Non, sed.</div>
      <div class="grid-cell">Officia, sit!</div>
      <div class="grid-cell">Esse, commodi?</div>
      <div class="grid-cell">Hic, odit.</div>
      <div class="grid-cell">Eius, expedita.</div>
      <div class="grid-cell">Nam, voluptatem!</div>
      <div class="grid-cell">Eligendi, vero.</div>
      <div class="grid-cell">Saepe, fugit?</div>
      <div class="grid-cell">Molestias, vero?</div>
      <div class="grid-cell">Vitae, nobis!</div>
      <div class="grid-cell">Neque, adipisci!</div>
      <div class="grid-cell">Nulla, harum.</div>
      <div class="grid-cell">Recusandae, accusantium.</div>
      <div class="grid-cell">Quae, voluptate?</div>
      <div class="grid-cell">Placeat, amet.</div>
      <div class="grid-cell">Repudiandae, omnis?</div>
      <div class="grid-cell">Voluptatum, dolores!</div>
      <div class="grid-cell">Similique, inventore?</div>
      <div class="grid-cell">Dolore, asperiores.</div>
      <div class="grid-cell">Suscipit, corporis.</div>
      <div class="grid-cell">Consequatur, porro!</div>
      <div class="grid-cell">Exercitationem, explicabo?</div>
      <div class="grid-cell">Reiciendis, inventore.</div>
      <div class="grid-cell">Architecto, commodi!</div>
      <div class="grid-cell">Officia, tempora.</div>
      <div class="grid-cell">Temporibus, eligendi.</div>
      <div class="grid-cell">Quasi, recusandae?</div>
    </div>
  </div>

  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione error optio vel ea adipisci nulla soluta nostrum earum, cum sapiente?
  </p>
  <p>
    Eligendi autem illum cum possimus a! Voluptatem necessitatibus ipsum sapiente, inventore, repellendus tempora omnis reprehenderit et minus voluptas aspernatur iste.
  </p>
  <p>
    Esse error porro dolore itaque? Maiores excepturi accusamus, pariatur tempore harum voluptate quis odit nostrum tenetur nemo, eum, doloremque neque?
  </p>
  <p>
    Soluta aut unde est voluptatum eius maxime. Voluptate qui laborum est, placeat hic delectus ipsam reprehenderit dolor accusamus veritatis ut?
  </p>
  <p>
    Pariatur, saepe reprehenderit odit asperiores, dolores quas minus libero quidem aperiam dolore molestias optio ut voluptates a eum laboriosam quis?
  </p>
  <p>
    Ex ipsa nobis iste temporibus obcaecati nemo inventore natus error quis, labore perspiciatis dolor quia magni! Fugit odio id minus.
  </p>
  <p>
    Consequatur nihil beatae commodi quaerat excepturi nulla sapiente odit sequi illo, quam accusantium ullam ut blanditiis saepe doloribus ex optio!
  </p>
  <p>
    Illum laudantium, deserunt eos excepturi odit, nostrum cupiditate voluptas mollitia facere architecto perspiciatis consequatur recusandae ad cum maiores unde nihil.
  </p>
  <p>
    Aspernatur assumenda autem magnam, et vero nostrum repudiandae ad error neque commodi, quidem beatae perspiciatis qui sequi provident laborum porro?
  </p>
  <p>
    Tempora possimus saepe natus, tempore adipisci quis ducimus. Quis incidunt quasi cupiditate libero commodi fugit voluptate neque asperiores autem nostrum?
  </p>
  <p>
    Consectetur debitis ab libero, optio obcaecati culpa quam repellat ad ex doloremque quod eaque aliquid voluptates aspernatur reiciendis, provident eveniet.
  </p>
  <p>
    Vel at repudiandae libero itaque, praesentium necessitatibus maxime eligendi quas, nihil dignissimos, debitis consectetur rerum animi fuga excepturi pariatur commodi.
  </p>
  <p>
    Debitis itaque eos eaque enim provident suscipit voluptates impedit consectetur est. Porro ipsam iusto impedit ipsum, dignissimos architecto minima reiciendis.
  </p>
  <p>
    Veritatis debitis voluptatum, repudiandae temporibus enim modi natus recusandae doloremque. Perspiciatis quae eos et, placeat soluta delectus quibusdam autem quasi.
  </p>
  <p>
    Accusantium commodi debitis dicta maxime maiores illum nulla nostrum distinctio hic libero amet omnis ducimus nobis, id ipsa aliquid pariatur.
  </p>
  <p>
    Accusamus dignissimos maxime eius provident sit architecto quasi, fuga pariatur, eveniet iste nesciunt quibusdam perspiciatis velit cupiditate beatae ex modi!
  </p>
  <p>
    Nulla aliquid architecto autem repellendus aut, nam ea obcaecati incidunt, debitis at veniam sunt porro. Molestias totam quisquam sint voluptatum!
  </p>
  <p>
    Quibusdam eaque sunt, optio cupiditate ab, eveniet distinctio, minima assumenda esse blanditiis dignissimos. Possimus, ut. Quia distinctio ut saepe dignissimos!
  </p>
  <p>
    Hic itaque nobis consectetur odio aut sed quos enim possimus cumque doloribus deserunt reiciendis veniam optio, saepe labore officia tenetur?
  </p>
  <p>
    Animi quibusdam doloribus repudiandae itaque consectetur cum, doloremque temporibus, necessitatibus culpa velit quo voluptates obcaecati sint ullam nisi, exercitationem est.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quidem perspiciatis omnis. Cupiditate ipsam nobis, odit hic voluptatibus beatae nemo?
  </p>
  <p>
    Ipsa veritatis sit iure nostrum officiis at sint? Numquam ea odio similique aut officia nostrum. Fugiat praesentium a ullam expedita?
  </p>
  <p>
    Dolore molestiae exercitationem iste repellat distinctio quis molestias? Quo quos velit officia eligendi doloribus? Explicabo ratione quidem facere aut provident.
  </p>
  <p>
    Possimus, vitae. Impedit earum et similique. Vero nostrum obcaecati nihil illum. Officiis veniam expedita veritatis est ut beatae ducimus eligendi!
  </p>
  <p>
    Nobis assumenda aliquam eius atque quisquam tenetur laudantium, maiores aut similique magni quidem vitae iure sint reiciendis excepturi nisi quia!
  </p>
  <p>
    Culpa inventore animi sed quis illum rem odit, sint doloremque, necessitatibus reiciendis et eveniet, explicabo quam unde ipsam. Distinctio, impedit!
  </p>
  <p>
    Inventore quas ipsam blanditiis itaque tempora minima atque saepe quia provident, accusantium officiis quos optio autem officia in. Libero, quam?
  </p>
  <p>
    Necessitatibus modi voluptate possimus, itaque voluptates aut odio in vitae, quod voluptatem porro consequatur facere dolor nobis recusandae! Maxime, quidem.
  </p>
  <p>
    Eveniet ratione facere mollitia placeat asperiores explicabo magni aspernatur rem. Vero, eum perspiciatis quam minus est quo. Minima, repellendus pariatur.
  </p>
  <p>
    Nihil minima odio possimus quidem, quasi, quis dolorem, natus rerum maiores facere debitis aliquam incidunt! Nisi similique officia asperiores distinctio.
  </p>
  <p>
    Corporis, ipsam fugiat! Fugit accusamus sapiente nobis quisquam fuga porro dolore natus libero, modi ipsa dignissimos in debitis quos laudantium?
  </p>
</div>

html 如何实现粘性和水平滚动表头

1条答案

相关问题

热门标签

最新问答