(css v2)

src/main/resources/static/css/table_style.css

@@ -15,13 +15,40 @@ h2{
 }
 .table-container {
 	height: 400px; /* Altura fija del contenedor */
-	overflow-y: auto; /* Scroll vertical */
-	/*border: 1px solid #ddd; !* Borde opcional *!*/
+	overflow: hidden; /* Scroll vertical */
+	border-radius: 5px;
 }
+
+/* Estilo para la barra de desplazamiento */
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+/* Estilo para el fondo de la barra */
+::-webkit-scrollbar-track {
+    background: rgba(85, 96, 143, 0.1);
+    border-radius: 10px;
+}
+
+/* Estilo para el control deslizante */
+::-webkit-scrollbar-thumb {
+    background: #55608f;
+    border-radius: 10px;
+    border: 3px solid transparent;
+    background-clip: content-box;
+}
+
+/* Efecto hover en el control deslizante */
+::-webkit-scrollbar-thumb:hover {
+    background: #404b7c;
+    border: 3px solid transparent;
+    background-clip: content-box;
+}
+
+
 table {
     width: 800px;
     border-collapse: collapse;
-	overflow: hidden;
     box-shadow: 0 0 20px rgba(0,0,0,0.1);
 }
 
@@ -35,33 +62,30 @@ th {
 	text-align: left;
 }
 
-thead {
-	th {
+thead th {
     background-color: #55608f;
-	}
 }
-
+thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+tbody {
+        display: block;
+        max-height: 350px;
+        overflow-y: auto;
+    }
+thead, tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+}
 tbody {
 	tr {
 		&:hover {
 			background-color: rgba(255,255,255,0.3);
 		}
 	}
-	td {
-		position: relative;
-		&:hover {
-			&:before {
-				content: "";
-				position: absolute;
-				left: 0;
-				right: 0;
-				top: -9999px;
-				bottom: -9999px;
-				background-color: rgba(255,255,255,0.2);
-				z-index: -1;
-			}
-		}
-	}
 }
 .celda-acciones{
     text-align: center;