diff --git a/src/main/resources/static/css/table_style.css b/src/main/resources/static/css/table_style.css index 167a038..03709e4 100644 --- a/src/main/resources/static/css/table_style.css +++ b/src/main/resources/static/css/table_style.css @@ -15,53 +15,77 @@ 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); + width: 800px; + border-collapse: collapse; + box-shadow: 0 0 20px rgba(0,0,0,0.1); } th, td { - padding: 15px; - background-color: rgba(255,255,255,0.2); - color: #fff; + padding: 15px; + background-color: rgba(255,255,255,0.2); + color: #fff; } th { text-align: left; } -thead { - th { - background-color: #55608f; - } +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;