css - 使表头相对于某个组件具有粘性

问题描述

我的整体结构如下图：

如您所见，它是可滚动的。我打算做的是允许滚动直到像这样的表头：

现在滚动超出应该将表格标题固定到顶部，并且只让表格的主体移动......我无法为此编写 CSS。请注意，我不希望唯一的表格可以滚动。我希望整个容器是可滚动的，一旦它到达表头，它应该冻结到顶部，之后只有主体应该是滚动友好的。

我的代码：

.WholeContainer {
  height: 25rem;
  width: 100%;
  background-color: red;
  overflow-y: scroll;
}

.miniWholeContainer {
  overflow: hidden;
  height: 10rem;
  width: 100%;
  background-color: yellow;
}

.Filter {
  height: 5rem;
  width: 100%;
  background-color: green;
  margin: 0;
  padding: 0;
}

.trhead {
  border: 2px solid #fff;
  background-color: greenyellow;
}

<h1>Fixing a certain Component within Scroll</h1>
<div class="WholeContainer">
  <div class="miniWholeContainer">
    <h1 class="Filter">Filter</h1>
  </div>
  <table>
    <thead>
      <th>
        <tr class="trhead">
          <td>A</td>
          <td>B</td>
          <td>C</td>
          <td>D</td>
          <td>E</td>
        </tr>
      </th>
    </thead>
    <tbody>
      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>

      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>E1</td>
      </tr>
    </tbody>
  </table>
</div>

复制链接

标签： csssticky

css - 使表头相对于某个组件具有粘性

问题描述

解决方案

推荐阅读