如何让桌头有粘性但有溢出

问题描述 投票：0回答：3

我试图在滚动时使表格的 粘在页面顶部，但是表格宽度应受其父项限制并允许沿 x 方向滚动。

但是一旦添加了overflow-x，粘性就不起作用了，如果没有overflow，那么头部会粘住，但是表格内容会打破其父容器的边界。

示例笔 https://codepen.io/JamesBlack91/pen/KKRJdQK

div {
  max-width: 300px;
  overflow-x: auto;
}

table thead {
  position: sticky;
  top: 0;
}

<div>
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
        <th>Column 13</th>
        <th>Column 14</th>
        <th>Column 15</th>
        <th>Column 16</th>
        <th>Column 17</th>
        <th>Column 18</th>
        <th>Column 19</th>
        <th>Column 20</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
    </tbody>
  </table>
</div>

如果滚动，头部不会粘住，但如果注释掉 div 上的溢出，头部会粘住，但列会溢出最大 300px。

我已经阅读了所有关于thead（之前）不支持粘性的内容，我也尝试过< th >但没有结果。我尝试将溢出放在 table/thead/tbody 而不是祖先 div 上，但似乎没有任何效果。

我真的想避免使用 javascript，而且我确信有一个简单的 css 解决方案，我只是不知道。

html css html-table sticky
3个回答
3
投票

这很优雅而且很有效：

<style>
 
.lock-header { 
  overflow-y: auto; 
  max-height: 500px;
}  
.lock-header thead { 
  position: sticky; 
  top: 0; 
}

</style>

<div class="lock-header">
    <table>
        <thead>
             <tr>
                 <th>Column head</th>
             </tr>

        </thead>
        <tbody>
             <tr>
                 <td>Detail row 1</th>
             </tr>
             <tr>
                 <td>Detail row 2</th>
             </tr>
        </tbody>
    </table>
</div>
0
投票

.lock-header {
  height: 100% !important;
}

.lock-header thead th {}

.lock-header>table {}

.lock-header tfoot td {}

.lock-header {
  overflow-y: auto;
  max-height: 300px;
  width: 300px;
  padding: 0;
}

.lock-header thead>tr:first-child>th {
  background-color: rgba(240, 240, 240, 0.8);
  z-index: 1;
  position: sticky;
  top: 0;
}

.lock-header>table {
  border-collapse: collapse;
  width: 100%;
}

.lock-header tfoot td {
  background-color: rgba(240, 240, 240, 1);
  z-index: 99;
  position: sticky;
  bottom: 0;
}
<div class="lock-header">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
        <th>Column 8</th>
        <th>Column 9</th>
        <th>Column 10</th>
        <th>Column 11</th>
        <th>Column 12</th>
        <th>Column 13</th>
        <th>Column 14</th>
        <th>Column 15</th>
        <th>Column 16</th>
        <th>Column 17</th>
        <th>Column 18</th>
        <th>Column 19</th>
        <th>Column 20</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
      <tr>
        <td>Some fake row</td>
      </tr>
    </tbody>
  </table>
</div>

这是你想要的吗？ 我在codepen上试过了，它有效

-1
投票

这不能仅用 CSS 来完成。粘性位置需要父容器上的初始溢出值，您将必须使用 JS 来粘住标题行。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.