Horizontal Scroll with sticky div on left side

Question

I'm creating a table of features, but on mobile I can't scroll horizontally until the end. It gets to a certain point, where the div on the left is not sticky. I want to make the div on the left always sticky.

How can this be achieved? Can I do this only with CSS? Or is there a need for javascript?

 .tbl { display: flex; flex-direction: column; background-color: transparent; /* box-shadow: 0 8px 120px rgba(36,51,81,.08); */ border-radius: 0 2px 2px 0; } .row { display: flex; min-height: 50px; background-color: pink; } .row p:hover { color: #3539B7; } .row-planos { display: flex; min-height: 115px; text-align: center; position: sticky; background-color: transparent; flex: 1 0 50px; top: 0px; /* CHANGE top: 104px; */ z-index: 100; } .offset-1 { flex: 1; display: flex; flex-wrap: wrap; } .offset-1 h4 { color: #3539B7; font-weight: 500; } .planos-text { text-transform: none; } .row-planos:before { content: ''; flex: 2; margin-right: 1%; } .row-planos>.offset-1 { color: green; text-align: center; } .row-planos>.offset-1:nth-child(1) { flex: 1; margin-left: calc(-0.5%); } .row-title { display: flex; min-height: 40px; flex: 5; background-color: rgba(53, 57, 183, 0.07); padding: 5px 0px 5px 7px; } .row-title>.cell:before { content: ""; width: 4px; left: -2px; height: 48px; border-radius: 2px 0 0 2px; background: #3539B7; position: absolute; } .cell { border: 1px solid red; flex-basis: 100%; flex: 1 1 0; width: auto; display: flex; align-items: center; } .cell:nth-child(1) { flex: 2; } /* .cell p:hover { color:#3539B7; }*/ .cell:nth-child(n + 2) { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; } .cell p { padding-left: 8px; font-size: clamp(0.785rem, 1.1vw, 1rem) !important; } .cell h4 { font-size: clamp(0.875rem, 1.2vw, 1.15rem) !important; font-weight: 500 !important; } .cell span { font-size: 10px; align-items: center; text-transform: uppercase; color: #3539B7; font-style: normal; background: #C2DBFC; border-radius: 4px; display: inline-block; padding: 6px; line-height: 1; font-weight: 700; margin-left: 8px; } .cell.span4-5 { flex: 8 24px; /* col 4,5 flex-grow/border/padding */ } .cell.span3-4 { flex: 8 24px; /* col 3,4 flex-grow/border/padding */ } .cell.span3-5 { flex: 12 36px; /* col 3,4,5 flex-grow/border/padding */ } .row:first-child .cell { display: flex; justify-content: center; /* center horiz. */ align-items: center; /* center vert. */ } .row-title:first-child .cell { display: flex; justify-content: center; /* center horiz. */ align-items: center; /* center vert. */ } .row-planos:first-child .cell { display: grid; justify-content: center; /* center horiz. */ align-items: center; /* center vert. */ background-color: #fff; box-shadow: 0 8px 40px rgba(36, 51, 81, .08), 0 4px 12px rgba(36, 51, 81, .02); margin: 5px; border-radius: 10px; } .row .cell { padding: 5px; box-sizing: border-box; } .row-title .cell { padding: 5px; box-sizing: border-box; } .row-planos.cell-planos { padding: 5px; box-sizing: border-box; } /* ICONS */ .fa-check:before { color: #3539B7; } /* BUTTONS */ .button-link-exp { background-color: #3539B7; fill: #FFFFFF; color: #FFFFFF; border: none; padding: 10px 14px; text-align: center; text-decoration: none; display: inline-block; border-radius: 18px; font-size: 13px; font-weight: 400; margin: 4px 2px; cursor: pointer; } .button-link-exp:hover { color: #FFFFFF; } /* TOOLTIPS */ .tooltip-phc { position: relative; border-bottom: 1px dotted black; } .tooltip-phc .tooltiptextphc { visibility: hidden; width: 170px; background-color: #3539B7; color: #fff; text-transform: none; line-height: 1.3em; text-align: center; font-weight: 400; font-size: 11px; padding: 10px; text-align: center; border-radius: 6px; margin-top: 0%; /* Position the tooltip left */ position: absolute; z-index: 1; top: 0px; left: 60%; } .tooltip-phc:hover .tooltiptextphc { visibility: visible; } .tooltip-phc .tooltiptextphc::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent #3539B7 transparent transparent; } p { color: #343f53; margin-bottom: 0em !important; } h4 { color: #343f53; margin-bottom: 0em !important; } @media (max-width: 775px) { .tbl { display: flex; flex-wrap: nowrap; width: auto; overflow: scroll; white-space: pre-wrap; overflow-x: auto; } .row-planos>.offset-1:nth-child(1) { flex: 1; margin-left: calc(60%); } .offset-1 p, .offset-1 a { display: none; } .row-planos { min-height: 50px; } .row-planos:first-child .cell { min-width: 27%; width: 27%; display: flex; } .row .cell { min-width: 30%; width: 30%; } .row-title { position: sticky; left: 0; flex-grow: 0; flex-shrink: 0; padding: 0; } .row>.cell:nth-child(1) { background-color: green; min-width: 60%; width: 60%; display: flex; flex-wrap: wrap; position: sticky; top: 0; left: 0; flex-grow: 0; flex-shrink: 0; } .row-title>.cell:before { display: none; } .cell p { padding-left: 0px; } .cell span { margin-top: 2%; margin-left: 0%; } .elementor-element-2f1ae4f7>.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated { padding-left: 0px !important; } }

 <div class="tbl"> <div class="row-planos"> <div class="cell offset-1"> <h4>Expert</h4> <a href="/experimentar-phc-go/" class="button-link-exp"> Experimente Grátis </a> </div> <div class="cell offset-1"> <h4>Pro</h4> <a href="/experimentar-phc-go/" class="button-link-exp"> Experimente Grátis </a> </div> <div class="cell offset-1"> <h4>Star</h4> <a href="/experimentar-phc-go/" class="button-link-exp"> Experimente Grátis </a> </div> <div class="cell offset-1"> <h4>Grow</h4> <a href="/experimentar-phc-go/" class="button-link-exp"> Experimente Grátis </a> </div> </div> <div class="row-title"> <div class="cell"> <h4>Gestão de Stocks completa e prestação de serviços</h4> </div> </div> <div class="row"> <div class="cell tooltip-phc"> <p>Ficha de Artigo e Serviços</p> <span class="tooltiptextphc">Mantenha o seu inventário físico atualizado e controlado</span> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> </div> <div class="row"> <div class="cell"> <p>Gestão de armazéns</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Transferências entre armazéns</p> </div> <div class="cell"> <p>Content </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Gestão de stocks</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Pesos e volumes</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Gestão de Stocks Avançada</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Inventário físico</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Produtos Compostos</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Gestão de lotes</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Produção simples e descomplicada - (addon)</p> <span>Brevemente</span> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> </div> <div class="row"> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> </div> <script src="https://kit.fontawesome.com/1e924ce76b.js" crossorigin="anonymous"></script>

Answer 1

I'm creating a table of features, but on mobile I can't scroll horizontally until the end. It gets to a certain point, where the div on the left is not sticky. I want to make the div on the left always sticky.

How can this be achieved? Can I do this only with CSS? Or is there a need for javascript?

 .tbl { display: flex; flex-direction: column; background-color: transparent; /* box-shadow: 0 8px 120px rgba(36,51,81,.08); */ border-radius: 0 2px 2px 0; } .row { display: flex; min-height: 50px; background-color: pink; } .row p:hover { color: #3539B7; } .row-planos { display: flex; min-height: 115px; text-align: center; position: sticky; background-color: transparent; flex: 1 0 50px; top: 0px; /* CHANGE top: 104px; */ z-index: 100; } .offset-1 { flex: 1; display: flex; flex-wrap: wrap; } .offset-1 h4 { color: #3539B7; font-weight: 500; } .planos-text { text-transform: none; } .row-planos:before { content: ''; flex: 2; margin-right: 1%; } .row-planos>.offset-1 { color: green; text-align: center; } .row-planos>.offset-1:nth-child(1) { flex: 1; margin-left: calc(-0.5%); } .row-title { display: flex; min-height: 40px; flex: 5; background-color: rgba(53, 57, 183, 0.07); padding: 5px 0px 5px 7px; } .row-title>.cell:before { content: ""; width: 4px; left: -2px; height: 48px; border-radius: 2px 0 0 2px; background: #3539B7; position: absolute; } .cell { border: 1px solid red; flex-basis: 100%; flex: 1 1 0; width: auto; display: flex; align-items: center; } .cell:nth-child(1) { flex: 2; } /* .cell p:hover { color:#3539B7; }*/ .cell:nth-child(n + 2) { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; } .cell p { padding-left: 8px; font-size: clamp(0.785rem, 1.1vw, 1rem) !important; } .cell h4 { font-size: clamp(0.875rem, 1.2vw, 1.15rem) !important; font-weight: 500 !important; } .cell span { font-size: 10px; align-items: center; text-transform: uppercase; color: #3539B7; font-style: normal; background: #C2DBFC; border-radius: 4px; display: inline-block; padding: 6px; line-height: 1; font-weight: 700; margin-left: 8px; } .cell.span4-5 { flex: 8 24px; /* col 4,5 flex-grow/border/padding */ } .cell.span3-4 { flex: 8 24px; /* col 3,4 flex-grow/border/padding */ } .cell.span3-5 { flex: 12 36px; /* col 3,4,5 flex-grow/border/padding */ } .row:first-child .cell { display: flex; justify-content: center; /* center horiz. */ align-items: center; /* center vert. */ } .row-title:first-child .cell { display: flex; justify-content: center; /* center horiz. */ align-items: center; /* center vert. */ } .row-planos:first-child .cell { display: grid; justify-content: center; /* center horiz. */ align-items: center; /* center vert. */ background-color: #fff; box-shadow: 0 8px 40px rgba(36, 51, 81, .08), 0 4px 12px rgba(36, 51, 81, .02); margin: 5px; border-radius: 10px; } .row .cell { padding: 5px; box-sizing: border-box; } .row-title .cell { padding: 5px; box-sizing: border-box; } .row-planos.cell-planos { padding: 5px; box-sizing: border-box; } /* ICONS */ .fa-check:before { color: #3539B7; } /* BUTTONS */ .button-link-exp { background-color: #3539B7; fill: #FFFFFF; color: #FFFFFF; border: none; padding: 10px 14px; text-align: center; text-decoration: none; display: inline-block; border-radius: 18px; font-size: 13px; font-weight: 400; margin: 4px 2px; cursor: pointer; } .button-link-exp:hover { color: #FFFFFF; } /* TOOLTIPS */ .tooltip-phc { position: relative; border-bottom: 1px dotted black; } .tooltip-phc .tooltiptextphc { visibility: hidden; width: 170px; background-color: #3539B7; color: #fff; text-transform: none; line-height: 1.3em; text-align: center; font-weight: 400; font-size: 11px; padding: 10px; text-align: center; border-radius: 6px; margin-top: 0%; /* Position the tooltip left */ position: absolute; z-index: 1; top: 0px; left: 60%; } .tooltip-phc:hover .tooltiptextphc { visibility: visible; } .tooltip-phc .tooltiptextphc::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent #3539B7 transparent transparent; } p { color: #343f53; margin-bottom: 0em !important; } h4 { color: #343f53; margin-bottom: 0em !important; } @media (max-width: 775px) { .tbl { display: flex; flex-wrap: nowrap; width: auto; overflow: scroll; white-space: pre-wrap; overflow-x: auto; } .row-planos>.offset-1:nth-child(1) { flex: 1; margin-left: calc(60%); } .offset-1 p, .offset-1 a { display: none; } .row-planos { min-height: 50px; } .row-planos:first-child .cell { min-width: 27%; width: 27%; display: flex; } .row .cell { min-width: 30%; width: 30%; } .row-title { position: sticky; left: 0; flex-grow: 0; flex-shrink: 0; padding: 0; } .row>.cell:nth-child(1) { background-color: green; min-width: 60%; width: 60%; display: flex; flex-wrap: wrap; position: sticky; top: 0; left: 0; flex-grow: 0; flex-shrink: 0; } .row-title>.cell:before { display: none; } .cell p { padding-left: 0px; } .cell span { margin-top: 2%; margin-left: 0%; } .elementor-element-2f1ae4f7>.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated { padding-left: 0px !important; } }

 <div class="tbl"> <div class="row-planos"> <div class="cell offset-1"> <h4>Expert</h4> <a href="/experimentar-phc-go/" class="button-link-exp"> Experimente Grátis </a> </div> <div class="cell offset-1"> <h4>Pro</h4> <a href="/experimentar-phc-go/" class="button-link-exp"> Experimente Grátis </a> </div> <div class="cell offset-1"> <h4>Star</h4> <a href="/experimentar-phc-go/" class="button-link-exp"> Experimente Grátis </a> </div> <div class="cell offset-1"> <h4>Grow</h4> <a href="/experimentar-phc-go/" class="button-link-exp"> Experimente Grátis </a> </div> </div> <div class="row-title"> <div class="cell"> <h4>Gestão de Stocks completa e prestação de serviços</h4> </div> </div> <div class="row"> <div class="cell tooltip-phc"> <p>Ficha de Artigo e Serviços</p> <span class="tooltiptextphc">Mantenha o seu inventário físico atualizado e controlado</span> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> </div> <div class="row"> <div class="cell"> <p>Gestão de armazéns</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Transferências entre armazéns</p> </div> <div class="cell"> <p>Content </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Gestão de stocks</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Pesos e volumes</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Gestão de Stocks Avançada</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Inventário físico</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Produtos Compostos</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Gestão de lotes</p> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"></div> <div class="cell"></div> </div> <div class="row"> <div class="cell"> <p>Produção simples e descomplicada - (addon)</p> <span>Brevemente</span> </div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> <div class="cell"><i class="fas fa-check"></i></div> </div> <div class="row"> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">Content</div> <div class="cell">Content</div> <div class="cell">Content</div> </div> </div> <script src="https://kit.fontawesome.com/1e924ce76b.js" crossorigin="anonymous"></script>