Tengo una tabla grande que se desplaza horizontal y verticalmente con la primera columna pegajosa y las tres filas de encabezado pegajosas. Esto funciona hasta cierto punto. Sin embargo, la mesa se extiende más allá del lado derecho de la pantalla.

Me gustaría que permaneciera en los límites de la pantalla. En la imagen se puede ver que tengo dos problemas:

1. La tabla se extiende más allá del final de la pantalla a la derecha.
2. El encabezado Nombre está detrás de la lista de nombres cuando se desplaza (esto no sucede en el jfiddle adjunto)

Cuando agrego este css:

 table { display: block; overflow: scroll; }

La mesa está dentro de los límites de la pantalla; sin embargo, el adhesivo en las filas de encabezado no funciona. La columna izquierda pegajosa tampoco es tan buena (ver la imagen).

Por favor vea mi intento de jfiddle; sin embargo, no puedo hacer que Bootstrap funcione (incluí los cdns).

https://jsfiddle.net/Glyndwr/2tfLu87a/11/

Mi objetivo es tener:

1. La mesa permanece dentro de los límites de la pantalla.
2. Las filas de encabezado superior y la columna izquierda se pegan cuando me desplazo
3. El encabezado del nombre permanece al frente cuando me desplazo

Un poco más de explicación relacionada con hacer que la celda "Nombre" en la esquina superior derecha sea pegajosa. Esta es la posición inicial:

Cuando me desplazo hacia la derecha, la columna "Nombre" está al frente, lo cual es correcto:

Sin embargo, cuando me desplazo hacia abajo, la celda "Nombre" no se pega:

Entonces, lo que necesito es que la celda "Nombre" se pegue tanto en el desplazamiento hacia la derecha como hacia abajo.