HTML - Sticky position partially working for table

Question

I want to build a first column sticky with css position:sticky and left:0.

While I have a header and a table, with overflow-x: scroll set. However, when I start to scroll to right, the first column for the table body is partially working and starting to move once it passed the width of its parent. For the table header it doesn't have such problem.

Please may I have your to provide some insights here

Here is my codepen for reference. Thanks a lot!!

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

Answer 1

I am really appreciate what Lowrey help here. Thank you so much.

The provide solution for 2nd question is really helpful and able to resolve this question. However, when I extend the width of the cells and it seems the problem happened again.

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>

Answer 2

Add to your .row-container the two css properties below:

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>

UPDATE: 2nd Question

I cleaned up you code a little bit. You mixed inline styles with css styles. But the main solution for your second question was to assign a width for cell-1 and remove the flex 0 0 100properties for the cell-1.

.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 3

Lowrey answer is perfectly working for above question. Thank you for that. However, I got another similar problem when even adding the flex-wrap cannot be resolved.

There is a table with two rows, and the first column stick to the left. While it is scrolling horizontally, the first column was sticked initially. After a while, the first column cannot stick anymore and start to move.

The situation is a bit similar to the original question. Thank you for advance for checking this.

.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