Estoy trabajando para hacer que la fila de encabezado de la tabla se mantenga en la parte superior siempre que el componente de la tabla esté en el puerto de visualización.

Tengo una tabla dentro de un div de envoltorio de tabla que está dentro de un div principal. Necesito controlar la barra de desplazamiento horizontal usando el div de envoltorio de tabla configurando su desbordamiento en automático. Para el desplazamiento vertical, quiero que el envoltorio de la tabla herede la barra de desplazamiento del div principal configurando el desbordamiento del envoltorio de la tabla para heredar o desactivar.

Código esqueleto: https://codepen.io/shubham_687/pen/powZpNb

Cambios HTML

 <div class="parentWrapper"> <div class="tableWrapper"> <table> <thead> <tr> <th class="sticky-header">num</th> <th class="sticky-header">alpha</th> </tr> </thead> <tbody> <tr> <th>1</th> <th>A</th> </tr> <tr> <td>2</td> <td>B</td> </tr> <tr> <td>3</td> <td>C</td> </tr> </tbody> </table> </div> <p> Paragraph </p> <p> Paragraph </p> <p> Paragraph </p> <p> Paragraph </p> <p> Paragraph </p> <p> Paragraph </p> <p> Paragraph </p> <p> Paragraph </p> <p> Paragraph </p> </div>

Cambios CSS

 .sticky-header { z-index: 7; position: sticky; top: 0px; } .parentWrapper { position: relative; overflow: auto; height: 100%; width: 100%; max-height: 300px; } /* This is working right now, in order to make header row sticky, have to unset both scroll bars from table wrapper */ .tableWrapper { overflow-x: unset; overflow-y: unset; position: relative; } /* Need this so that sticky header can work and also table wrapper can control horizontal scroll bar by setting max width later */ /* .tableWrapper { overflow-x: auto; overflow-y: unset; position: relative; } */

parece desbordamiento-x: sobrescribe automáticamente el valor de desbordamiento-y y el control para ambas barras de desplazamiento va al div de envoltorio de tabla y podemos acceder a la configuración de la barra de desplazamiento de altura máxima y ancho máximo para el envoltorio de tabla.

Si configuro el desbordamiento-x y el desbordamiento-y para desactivarlo, tanto la barra de desplazamiento horizontal como la vertical se controlan mediante el div principal.

Entonces, mi pregunta es si es posible tener overflow-x: auto con overflow-y: unset o esta combinación no es compatible.