Question

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

到目前为止我所知道的

粘性位置在具有溢出功能的父级内部不起作用
可以用javascript“破解”它，但是由于所有活动部件，它的工作量很大（溢出位置，大小等）

我的问题是上下文

我使用的网格应固定 top 和 bottom ，并且 main 应该可滚动
主要有一张桌子，将来可能会在垂直和水平方向上溢出
将th设置为粘性（但由于溢出而无法使用）
我曾经使用一个具有松散元素（没有父元素）的网格来解决它，但这太混乱了，无法使用

问题

我更喜欢纯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>

Answer 1

将top: 0;添加到表

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

Answer 2

为要粘贴的<th>提供类名，并为该类使用Position:sticky，如下所示：

.stickyThis{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
* {
  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 class="stickyThis">Head first</th>
          <th class="stickyThis">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>

网格内的粘滞表标题自动在网格内

2 个答案: