布局、主体元素上的垂直滚动以及带有水平滚动和粘性标题的表格存在问题

Question

我在

overflow-y

上有

auto

body

以及包含表格的内容。有一个

div

包含表格，并且它有

overflow-x

auto

用于在表格视图中水平滚动。桌子上有一个

thead

和

position

sticky

和

top

0

。

我目前的问题：

1. 如果我将

   overflow-x

   auto

   添加到

   div

   表格容器，则

   thead

   粘性定位不起作用（在 y 轴滚动时它不会粘在桌面上）。
2. 如果我将

   thead

   更改为固定位置，它确实可以工作，但会产生另一个问题，它会弄乱 thead 容器的宽度，因为固定是基于屏幕视口而不是相对于父级。

是否可以有一个带有

position

sticky

的元素，并允许其中一个容器具有

overflow-x

auto

而不给出固定高度？

代码沙箱

结构如下：

<div className="main-container">
  <div className="table-container">
    <table>
    <thead> 
      <tr> 
        <th></th>
      </tr>  
    </thead> 
    <tbody> 
    <tr> 
    <td></td>
    </tr>  
    </tbody> 
    </table>  
  </div>
  <section className="table-footer"/>
</div>

.main-container {
  height: 100%;
  width: 100%;
  display: inline-grid;
}

.table-container {
  overflow-x: auto; //this will mess thead sticky positioning.  also tried, overflow-x: clip; - but it doesn't work..
  height: 100%;
  width: 100%;
}

table {
  border-collapse: separate;
  width: 100%;
  table-layout: auto;
  position: relative;
}

thead {
  top: 194px;
  position: sticky; //If i change to position fixed it will work but will create another issue where thead is not relative to parent and will overflow it's width.
}

Answer 1

将

overflow-x: auto

添加到

.table-container

会阻止表头粘性发挥作用，因为，来自 MDN 文档：

元素按照文档的正常流程定位，然后相对于其最近的滚动祖先和包含块（最近的块级祖先）

进行偏移

因此，当您垂直滚动文档时，

.table-container

会随文档一起移动。

.table-container

本身不会滚动，因此表格标题不会粘在 文档上。 解决方法可能是使

.table-container

成为页面的唯一滚动容器，从而允许其滚动，从而使表格标题表现出粘性行为：

.app-container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 100vh;
  height: 100%;
}

.main-content-container {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.content-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  flex: 1 1 0%;
  min-height: 0;
}

.sidebar-container {
  position: relative;
  user-select: none;
  width: 50px;
}

.my-sidebar {
  background-color: aqua;
  height: 100vh;
  position: fixed;
  width: 50px;
  left: 0;
  top: 0;
}

.my-header {
  height: 64px;
  background-color: black;
  color: white;
  z-index: 50;
  display: flex;
  align-items: center;
}

.table-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  width: 100%;
  min-height: 0;
  overflow: auto;
}
.table-container > table {
  position: relative;
  border-collapse: separate;
  table-layout: auto;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-indent: 0;
  border-color: inherit;
  border-spacing: 4px;
  background-color: rgba(0, 0, 0, 0.579);
}
.table-container > table > thead {
  color: white;
  background-color: grey;
  position: sticky;
  top: 4px;
  z-index: 10;
}


.table-container > table > tbody {
  display: table-row-group;
  vertical-align: middle;
}
.table-container > table > tbody > tr {
  height: 250px;
  border-collapse: separate;
  background-color: rgb(188, 188, 188);
}

body {
  margin: 0;
  line-height: inherit;
}

<div id="root">
  <div class="app-container">
    <div class="sidebar-container">
      <aside class="my-sidebar">Sidebar</aside>
      ;
    </div>
    <div class="main-content-container">
      <header class="my-header">Header</header>
      <div class="content-container">
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <td>date</td>
                <td>domain</td>
                <td>user</td>
                <td>source</td>
                <td>destination</td>
                <td>enforcement</td>
                <td>message</td>
                <td>status</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>Mon Dec 30 2024 13:13:58 GMT+0000 (Greenwich Mean Time)</th>
                <th>my-domain</th>
                <th>my-user1</th>
                <th>my-source</th>
                <th>my-destination</th>
                <th>MFA</th>
                <th>message</th>
                <th>my-status</th>
              </tr>
              <tr>
                <th>Mon Dec 30 2024 13:13:58 GMT+0000 (Greenwich Mean Time)</th>
                <th>my-domain</th>
                <th>my-user2</th>
                <th>my-source</th>
                <th>my-destination</th>
                <th>MFA</th>
                <th>message</th>
                <th>my-status</th>
              </tr>
              <tr>
                <th>Mon Dec 30 2024 13:13:58 GMT+0000 (Greenwich Mean Time)</th>
                <th>my-domain</th>
                <th>my-user3</th>
                <th>my-source</th>
                <th>my-destination</th>
                <th>MFA</th>
                <th>message</th>
                <th>my-status</th>
              </tr>
              <tr>
                <th>Mon Dec 30 2024 13:13:58 GMT+0000 (Greenwich Mean Time)</th>
                <th>my-domain</th>
                <th>my-user4</th>
                <th>my-source</th>
                <th>my-destination</th>
                <th>MFA</th>
                <th>message</th>
                <th>my-status</th>
              </tr>
              <tr>
                <th>Mon Dec 30 2024 13:13:58 GMT+0000 (Greenwich Mean Time)</th>
                <th>my-domain</th>
                <th>my-user5</th>
                <th>my-source</th>
                <th>my-destination</th>
                <th>MFA</th>
                <th>message</th>
                <th>my-status</th>
              </tr>
              <tr>
                <th>Mon Dec 30 2024 13:13:58 GMT+0000 (Greenwich Mean Time)</th>
                <th>my-domain</th>
                <th>my-user6</th>
                <th>my-source</th>
                <th>my-destination</th>
                <th>MFA</th>
                <th>message</th>
                <th>my-status</th>
              </tr>
              <tr>
                <th>Mon Dec 30 2024 13:13:58 GMT+0000 (Greenwich Mean Time)</th>
                <th>my-domain</th>
                <th>my-user7</th>
                <th>my-source</th>
                <th>my-destination</th>
                <th>MFA</th>
                <th>message</th>
                <th>my-status</th>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>