css - 网格内溢出自动内的粘性表格标题

标签 css html-table sticky

类似的问题已经发布,但这是对问题的新看法。

目前我所知道的

  • 粘性位置在溢出的父级中不起作用
  • 可以使用 javascript 对其进行“破解”,但是对于所有移动部件,工作量太大(溢出位置、大小等)

我的问题是上下文

  • 我使用了一个网格,其中 topbottom 应该是固定的,ma​​in 应该是可滚动的
  • 主要有一个表格,以后可能会垂直和水平溢出
  • th 设置为 sticky(但由于溢出而不起作用)
  • 有一次我通过使用带有松散元素(没有父元素)的网格来解决这个问题,但是那太乱了无法使用

问题

  • 我更喜欢纯 CSS 解决方案
  • 我该如何解决?

https://jsfiddle.net/jw147aqk/1/

您需要调整窗口大小以使表格溢出。

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
}

.wrap {
  background: #eee;
  height: 100%;
  
  display: grid;
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas: "header" "main" "footer";
}

header {
  grid-area: header;
  background: green;
  color: #fff;
}

main {
  overflow-y: auto;
}

footer {
  grid-area: footer;
  background: #ba0000;
  color: #fff;
}

table {
  width: calc(100% - 3px);
  border-collapse: collapse;
}

table th {
  background: #000;
  color: #fff;
  height: 50px;
  position: sticky;
}

table td {
  background: #fff;
  height: 50px;
  border: 1px solid #ccc;
}
<div class="wrap">
  <header>My header</header>
  <main>
    <table>
      <thead>
        <tr>
          <th>Head first</th>
          <th>Head second</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
        <tr>
          <td>Cell first</td>
          <td>Cell second</td>
        </tr>
      </tbody>
    </table>
  </main>
  <footer>Footer</footer>
</div>

最佳答案

top: 0; 添加到 table th

table th {
  background: #000;
  color: #fff;
  height: 50px;
  position: sticky;
  top: 0;
}

关于css - 网格内溢出自动内的粘性表格标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56461368/

相关文章:

javascript - getSelection 在 Chrome 中无法正常工作

html - 使用显示 :table-cell without containing display:table

html - flex 元素中的底部对齐文本

javascript - 单击按钮时将日期选择器附加到新行的列

html - Zurb Foundation 6 视口(viewport)高度结束时的粘性开关状态 ".is-anchored .is-at-bottom"

html - 滚动 y 容器中的粘性页脚取决于内容的高度

javascript - 我怎样才能让我的导航栏在到达它时粘在元素的底部?

css - 使背景图像位置垂直居中到左

javascript - CSS3+Javascript 位置粘性可滚动内容

html - 我可以通过 CSS 设置表格单元格元素的宽度吗?