css 垂直和水平放置粘滞条

oewdyzsn  于 2022-11-26  发布在  其他
关注(0)|答案(2)|浏览(303)

我努力得到一个例子，坚持垂直和水平。
所以我能够让表头粘住。我试图让表头和表尾粘住，在水平滚动时不移动
Here is a link to the demo.

aside {
  width: 200px;
  position: fixed;
  height: 100vh;
  background: red;
}

main {
  margin-left: 220px;
  background: beige;
}

header {
  height: 100px;
  background: teal;
  position: sticky;
  left: 220px;
}

th {
  position: sticky;
  top: 0;
  background: aqua;
}

footer {
  background: green;
  height: 2000px;
} 

<html>
  <body>
    <aside>aside</aside>
    <main>
      <header>
      header
    </header>
      <table>
        <tr><th>Test</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th><th>Text</th></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>
      </table>
      <footer>
      </footer>
    </main>
  </body>
</html>
css

2条答案

按热度按时间
8dtrkrch

8dtrkrch1#

本质上，它不能使用纯CSS规范地完成。
需要的是在一个滚动容器内的不同元素上的sticky-x和sticky-y，但没有这样的东西。
页眉和页脚没有被粘住，因为它们需要一个包含块和一个滚动容器。如果你在你的“main”周围放一个“container”，并使用CSS（使用类）：

.container {
    margin-left: 220px;
}

.main {
    background: beige;
    overflow-x: auto;
}

它应该可以解决这个问题，但是粘在表头上的东西会停止工作。（而且表尾需要“位置：也添加了“粘性"。）
您可能会使用定位或网格，当然也可以使用javascript，为特定的布局获得特定的解决方案，但要做到这一点，您需要准确地建议何时以及如何希望表结构相对于其他元素滚动。

赞(0）分享  回复(0）举报  2022-11-26
tzdcorbm

tzdcorbm2#

我想出了一个解决办法。
我必须使用calc和z-index的组合来获得我所需要的。我还必须确保布局组件没有间距。
Here is the link.

* {
  margin: 0;
  padding: 0;
  background: #ccc;
  box-sizing: border-box;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}

body {
  overflow-y: scroll;
}

aside {
  width: 200px;
  position: fixed;
  height: 100vh;
  background: red;
  z-index: 50;
}

main {
  margin-left: 200px;
  background: #556B2F;
  width: min-content;
}

header, footer {
  height: 100px;
  position: sticky;
  left: 200px;
  width: calc(100vw - 200px - 15px); //15px is width of the scrollbar
}

th:first-child, td:first-child {
  position: sticky;
  left: 200px;
}

td:first-child {
  padding-left: 5px;
  z-index: 10;
  background: white
}

th:first-child {
  padding-left: 5px;
  z-index: 30;
}

th {
  position: sticky;
  top: 0;
  background: aqua;
  z-index: 20;
}

footer {
  height: 2000px;
}
赞(0）分享  回复(0）举报  2022-11-26
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com