隐藏溢出绝对定位

Question

根据我的要求，我需要固定表格的页眉/页脚。 我需要溢出绝对定位的页眉/页脚与父级。

FIDDLE

我尝试按照这个答案https://stackoverflow.com/a/4605809/2968762

但是通过将position: relative;应用于包装器div，页眉/页脚不再固定。

Answer 1

body {
  height: 50rem;
}
.wrapper {
  margin-top: 10rem;
  max-height: 6.7rem;
  max-width: 12.5rem;
  overflow: scroll;
  table {
    width: 25rem;
  }
}

.header,
.footer {
  table {
    position: absolute;
    background: white;
  }
}

.footer table {
  bottom: 10.6rem;
}

table {
  thead {
    tr {
      th {
        width: 4rem;
        text-align: center;
      }
    }
  }
  tbody {
    tr {
      td {
        width: 4rem;
        text-align: center;
      }
    }
  }
}


.wrapper .header {
    position: absolute;
    width: 11.5rem;
    overflow: hidden;
    background: white;
    top: 160px;
}

<div class="wrapper">
  <div class="header">
    <table>
      <thead>
        <tr>
          <th>Head 1</th>
          <th>Head 2</th>
          <th>Head 3</th>
          <th>Head 4</th>
          <th>Head 5</th>
          <th>Head 6</th>
        </tr>
      </thead>
    </table>
  </div>

  <div class="main_body">
    <table>
      <thead>
        <tr>
          <th>Head 1</th>
          <th>Head 2</th>
          <th>Head 3</th>
          <th>Head 4</th>
          <th>Head 5</th>
          <th>Head 6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>11</td>
          <td>23</td>
          <td>44</td>
          <td>20</td>
          <td>30</td>
          <td>40</td>
        </tr>
        <tr>
          <td>32</td>
          <td>1</td>
          <td>7</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>49</td>
          <td>30</td>
          <td>57</td>
          <td>30</td>
          <td>41</td>
          <td>52</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="footer">
    <table>
      <tbody>
        <tr>
          <td>49</td>
          <td>30</td>
          <td>57</td>
          <td>30</td>
          <td>41</td>
          <td>52</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

这应该可以解决问题

Answer 2

感谢THIS ARTICLE，我找到了解决方案：

将整个内容包装到另一个包装器中并将以下样式应用于它修复了问题：

.grand-wrapper {
  position: relative;
  overflow: hidden;
}

FIDDLE