flexbox表中的粘性标头不是粘性的

问题描述

我已经创建了一个基于flexBox的表，该表在以下示例的基础上已被剥离。

<!-- display: flex;flex-flow: column Nowrap; flex:1 1 auto; --> 
<div class="ovdTable"> 
  <!-- display: flex; flex-flow: row Nowrap; flex: 1 1 auto; -->
  <div class="ovdTable__table">  
    <!-- flex:1 1 auto; -->
    <div class="ovdTable__column">   
      <!-- display:flex; flex:none; -->                    
      <div class="ovdTable__cell ovdTable__cell--header"> 
      <!-- 1-n -->
      <div class="ovdTable__cell">                 
    </div>
  </div>
</div>

CSS类ovt_Table__cell--header将以下样式属性添加到列的第一个单元格中。

position: sticky;
position: -webkit-sticky;
top:0;

按预期，我已经搜索了类似的stackoverflow文章，并尝试了在那里找到的解决方案。

• My position: sticky element isn't sticky when using flexbox
  • 使用overflow-x: hidden;检查了父元素
  • 将align-self: flex-start添加到了粘性元素。
• Fixed element inside flexbox item
  • 在这里找不到任何有用的信息。

我有一个Codepen示例here。

也许我完全错了，但是我可以在溢出设置中犯一个错误吗？

-更新1-

现在，我可以通过在div内添加一个额外的div来解决粘性标题，该div的类为“ ovdTable”，其中包含标题单元格，并使该div带有较高的z-index粘性。

<!-- display: flex;flex-flow: column Nowrap; flex:1 1 auto; --> 
<div class="ovdTable"> 
    <!-- display: flex; flex-flow: row Nowrap; flex: 1 1 auto; -->
    <!-- position: sticky; top:0px; z-index:2; --> 
    <div class="ovdTable__tableHeader"> 
      <!-- 1-n -->
      <div class="ovdTable__tableHeader--column">Column 1</div>
    </div>
    <!-- display: flex; flex-flow: row Nowrap; flex: 1 1 auto; -->
    <div class="ovdTable__tableContent">  
        <!-- flex:1 1 auto; -->
        <div class="ovdTable__column">   
            <!-- 1-n -->
            <div class="ovdTable__cell">                 
        </div>
    </div>
</div>

此更新后，我已更新了代码笔以匹配当前状态。因为现在标题和行有两个不同的伸缩框，所以标题和行的列宽不同。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）