HTML - 粘性位置部分适用于 table

Question

我想用 css position:sticky 和 left:0.

创建第一列

我有一个 header 和一个 table，设置了 overflow-x: scroll。但是，当我开始向右滚动时，table body 的第一列部分工作并在超过其 parent 的宽度后开始移动。对于 table header 它没有这样的问题。

请允许我在这里提供一些见解

这是我的代码笔供参考。非常感谢！！

https://codepen.io/jackforfun/pen/yLPwYoz

Answer 1

将以下两个 css 属性添加到您的 .row-container 中：

display: flex;
flex-wrap: wrap;

.cell {
  padding: 25px;
  flex: 0 0 100px;
  border: 1px solid grey;  
}

.cell-1 {
  padding: 25px;
  flex: 0 0 100px;
  border: 1px solid grey;
  background-color: red;  
  position: sticky;
  left: 0;
}

.header {
  display: flex;
  background-color: orange;
  width: 500px;
  overflow-x: scroll;
  
}

.row-container {
  display: flex;
  flex-wrap: wrap;  
  width: 500px;
  overflow-x: scroll;
}


.row {
  display: flex;
  background-color: green;
}

<div>
  <div class="header">
    <div class="cell-1">First</div>
    <div class="cell">Header</div>
    <div class="cell">Header</div>
    <div class="cell">Header</div>
    <div class="cell">Header</div>
    <div class="cell">Header</div>
    <div class="cell">Header</div>    
  </div>
  
  <div class="body">
    <div class="row-container">
      <div class="row">
        <div class="cell-1">Content</div>
        <div class="cell">Content</div>
        <div class="cell">Content</div>
        <div class="cell">Content</div>
        <div class="cell">Content</div>
        <div class="cell">Content</div>        
      </div>
      <div class="row">
        <div class="cell-1">Content</div>
        <div class="cell">Content</div>
        <div class="cell">Content</div>
        <div class="cell">Content</div>
        <div class="cell">Content</div>
        <div class="cell">Content</div>        
      </div>
    </div>
  </div>
</div>

更新：第二个问题

我稍微清理了你的代码。您将内联样式与 css 样式混合在一起。但是第二个问题的主要解决方案是为单元格 1 分配宽度并删除单元格 1 的 flex 0 0 100 属性。

.cell-1 {  
  border: 1px solid grey;
  background-color: red;  
  position: sticky;
  left: 0;
  width:200px;
}

.cell {
  padding: 25px;
  height: 50px;
  flex: 0 0 100px;
  border: 1px solid grey;  
}

.cell-1 {  
  border: 1px solid grey;
  background-color: red;  
  position: sticky;
  left: 0;
  width:200px;
}


.row-container {
  overflow-x: scroll;
  flex-wrap:wrap;
  display:flex;
}

.row {
  display: flex;
  background-color: green;
}

.grid {  
  width: 350px;
}

<div class="grid">
  <div class="row-container">
    <div class="row">
      <div class="cell-1 cell" >
        First Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell">
        Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell">
        Column
      </div>
         <div class="cell" >
        Column
      </div>  
    </div>
    <div class="row">
      <div class="cell cell-1">
        First Column
      </div>
      <div class="cell">
        Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell" >
        Column
      </div>    
  </div>
</div>
</div>

Answer 2

Lowrey 的回答非常适合上述问题。谢谢你。但是，即使添加 flex-wrap 我也遇到了另一个类似的问题无法解决。

有一个 table 有两行，第一列在左边。当它水平滚动时，第一列最初是固定的。过了一会儿，第一根柱子粘不住了，开始动了。

情况和原题有点相似。感谢您提前检查。

.cell {
  padding: 25px;
  height: 50px;
  flex: 0 0 100px;
  border: 1px solid grey;  
}

.cell-1 {
  padding: 25px;
  flex: 0 0 100px;
  border: 1px solid grey;
  background-color: red;  
  position: sticky;
  left: 0;
}


.row-container {
  overflow-x: scroll;
  flex-wrap:wrap;
  display:flex;
}

.row {
  display: flex;
  background-color: green;
}

.grid {  
  width: 350px;
}

<div class="grid">
  <div class="row-container">
    <div class="row">
      <div class="cell-1" style="flex: 1 0 150px; ">
        First Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>      
    </div>
    <div class="row">
      <div class="cell-1" style="flex: 1 0 150px; ">
        First Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>
      <div class="cell" style="flex: 1 0 100px; ">
        Column
      </div>      
  </div>
</div>

https://codepen.io/jackforfun/pen/abVMyMd

Answer 3

我非常感谢 Lowrey 在这里提供的帮助。非常感谢。

第二个问题提供的解决方案真的很有帮助，能够解决这个问题。但是，当我扩展单元格的宽度时，问题似乎又发生了。

https://codepen.io/jackforfun/pen/YzEgvRj

.long-cell { flex: 0 0 300px;}

.cell {
  padding: 25px;
  height: 50px;
  flex: 0 0 100px;
  border: 1px solid grey;  
}

.cell-1 {  
  border: 1px solid grey;
  background-color: red;  
  position: sticky;
  left: 0;
  width:200px;
}

.long-cell {
  flex: 0 0 300px;
}


.row-container {
  overflow-x: scroll;
  flex-wrap:wrap;
  display:flex;
}

.row {
  display: flex;
  background-color: green;
}

.grid {  
  width: 350px;
}

<div class="grid">
  <div class="row-container">
    <div class="row">
      <div class="cell-1 cell" >
        First Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell">
        Column
      </div>
      <div class="cell long-cell" >
        Column
      </div>
      <div class="cell">
        Column
      </div>
         <div class="cell " >
        Column
      </div>  
    </div>
    <div class="row">
      <div class="cell cell-1">
        First Column
      </div>
      <div class="cell">
        Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell long-cell" >
        Column
      </div>
      <div class="cell" >
        Column
      </div>
      <div class="cell" >
        Column
      </div>    
  </div>
</div>
</div>

HTML - 粘性位置部分适用于 table

HTML - Sticky position partially working for table

javascript

css

css-position

sticky

更新：第二个问题