Position Sticky 用于水平滚动的表头答案

【问题标题】：Position Sticky for table headers with horizontal scrollPosition Sticky 用于水平滚动的表头
【发布时间】：2021-02-20 17:09:20
【问题描述】：

我有一个可以水平滚动但不能垂直滚动的 HTML 表格

当您向下滚动时，我想将表格的标题固定到顶部，但是当我在元素上使用 position:sticky 以及在父元素上使用 overflow-x:scroll 时，它不会粘住。

这是问题https://jsfiddle.net/a53exv28/8/的示例小提琴

【问题讨论】：

为什么在没有它的情况下使用overflow-x:scroll？
需要溢出-x，因为我想要实现的实际表中的列数约为 20 左右，我不能只在页面上显示这些列，因为它需要更多空间大于视图宽度。而且我无法指定高度并使其沿 y 轴滚动，因为该表应该能够使用 vue 等 FE 框架动态接收更多数据。
仍然不需要溢出-x。 TBH 是我从未使用过也永远不会使用的财产。当您删除它时，您的容器将默认具有溢出：自动，因此只要您的表格大于容器，您就会拥有所需的滚动......因为您可以检查您的 jsfiddle 删除属性。无论如何，这是我在这个问题上的最后评论......当我看到人们寻求帮助时说“需要溢出-x”试图“解释”它是如何工作的 cmets......很明显，他们实际上并没有开放的态度得到任何帮助。 GL 与您的项目。
@AlvaroMenéndez 对不起，如果我对你很粗鲁，我只是想解释一下，如果你删除它，表格会继续溢出到 div 之外。我尝试了你在小提琴中建议的内容，粘性标题有效，但表格不可滚动 x 轴。如果你用overflow:auto替换它，它会添加滚动，但是标题不粘的问题仍然存在。

标签： html css html-table css-position

【解决方案1】：

也许您不能将表格标题设置为水平固定，但您可以这样做

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
}


td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: fixed;
    left: 5px
}

<div class="table-wrapper">
    <table id="consumption-data" class="data">
        <thead class="header">
            <tr>
                <th>Month</th>
                <th>Item 1</th>
                <th>Item 2</th>
                <th>Item 3</th>
                <th>Item 4</th>
            </tr>
        </thead>
        <tbody class="results">
            <tr>
                <th>Jan</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Feb</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Mar</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Apr</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>  
            </tr>
            <tr>    
                <th>May</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Jun</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>

            <tr>
                <th>...</th>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

【讨论】：

【解决方案2】：

请检查我的 sn-p，我是用位置粘着的，你还需要指定包装器 div 高度并将 scroll-y 属性设置为滚动。检查下面的代码以供参考。

<!DOCTYPE html>
<html>

<head>
  <title>data table demo</title>
  <style type="text/css">
    body {
      padding: 0px;
      margin: 0px;
    }
    
    .fixed-table-wrap {
      display: block;
      width: 100%;
      overflow-x: auto;
      overflow-y: scroll;
      height: calc(100vh);
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    
    .fixed-table-wrap table {
      border-collapse: collapse;
    }
    
    .fixed-table-wrap table th,
    .fixed-table-wrap table td {
      padding: 10px;
      border: 1px solid #c3c3c3;
    }
    
    .fixed-table-wrap table th {
      position: sticky;
      position: -webkit-sticky;
      top: 0px;
      z-index: 99;
      border-right: 1px solid #798ba9 !important;
      background-color: #c3c3c3;
    }
    
    .fixed-table-wrap table th::after {
      content: "";
      display: inline-block;
      width: 1px;
      background-color: #aba8a8;
      position: absolute;
      right: -1px;
      height: 40px;
      top: 0px;
    }
  </style>
</head>

<body>
  <div class="fixed-table-wrap">
    <table id="example" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
        <tr>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
        </tr>
        <tr>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
        </tr>
        <tr>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$162,700</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$162,700</td>
        </tr>
        <tr>
          <td>Brielle Williamson</td>
          <td>Integration Specialist</td>
          <td>New York</td>
          <td>61</td>
          <td>2012/12/02</td>
          <td>$372,000</td>
          <td>New York</td>
          <td>61</td>
          <td>2012/12/02</td>
          <td>$372,000</td>
        </tr>
        <tr>
          <td>Herrod Chandler</td>
          <td>Sales Assistant</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
        </tr>
        <tr>
          <td>Herrod Chandler</td>
          <td>Sales Assistant</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
        </tr>
      </tbody>

    </table>
  </div>

</body>

</html>

【讨论】：

感谢您，但我无法沿表格的 y 轴设置固定高度，因为表格应该能够向下扩展到页面中，因为数据通过 vue 或 react 动态更新跨度>
能否请您更改 .fixed-table-wrap{ height:calc(100vh) }