From 86da3b9865c1b6b9142adbeee08f1d075cddd176 Mon Sep 17 00:00:00 2001
From: vicsash <victorsash96@gmail.com>
Date: Fri, 14 Jun 2024 19:48:23 +0200
Subject: [PATCH] Ajustes al controladores de operaciones crud que usa el
 administrador

---
 src/main/resources/static/style.css           | 547 +++++++++++++-----
 .../resources/templates/list/alumnos.html     |  23 +-
 src/main/resources/templates/list/ciclos.html |   8 +-
 .../resources/templates/list/contactos.html   |   8 +-
 .../resources/templates/list/empresas.html    |  29 +-
 .../resources/templates/list/familias.html    |  10 +-
 .../resources/templates/list/ofertas.html     |  21 +-
 .../resources/templates/list/sectores.html    |   8 +-
 src/main/resources/templates/list/skills.html |   8 +-
 .../resources/templates/list/sucursales.html  |   8 +-
 10 files changed, 482 insertions(+), 188 deletions(-)

diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index 9179693..48113cd 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -1,173 +1,461 @@
+.header {
+    font-size: 2em;
+    display: flex;
+    background-color: blue;
+    color: white;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+}
+
+.header::before,
+.header::after {
+    content: '';
+    flex: 1;
+}
+
+.header::before {
+    order: -1;
+}
+
 .logout-button {
-    position: fixed;
-    top: 0px;
-    right: 0px;
-    background-color: red;
+    order: 2;
+}
+.logout-button{
     color: white;
-    border: none;
-    text-decoration: none;
-    font-size: 20px;
-    padding: 0px;
-    margin: 0px;
-    border-radius: 0;
+    background-color: #ed4040;
+    font-size: 1.5em;
+    margin: auto;
+}
+/* TOOLBABR-INPUT-PDF*/
+.toolbar {
     display: flex;
-    justify-content: center;
     align-items: center;
-    width: 40px;
-    height: 40px;
+    justify-content: space-between;
+    padding: 0.2vw;
+    box-sizing: border-box;
 }
-th {
-    background-color: #f2f2f2;
-    color: black;
-    padding: 10px;
-    border: 2px solid #ddd;
+.toolbar .button-group{
+    display: flex;
+    justify-content: right;
 }
-
-h1 {
+.pdfButton {
+    font-size: 0.5em; /* Adjust as needed */
+    padding: 1em;
+    margin : 0.25em;
+    width: auto;
+    white-space: normal;
     text-align: center;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
-    font-size: 3vw;
-    color: white;
-    margin: 0 0 50px;
-    padding-top: 0;
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-    position: relative;
 }
+
+/*--TABLE --*/
 .table {
     width: 100%;
-    table-layout: auto!important;
-
+    table-layout: fixed;
+    border: black 2px;
 }
-.table thead th {
-    position: sticky;
-    top: 0;
-    background: #fff;
-    z-index: 10;
-    width: 300px !important; /* Set a specific width */
+.scrollable-cell {
+    overflow: auto;
+    white-space: normal;
 }
-.table td{
-    border: 2px solid #ddd;
+.table td, .table th {
+    overflow: auto;
+    white-space: normal;
 }
-.table td.scrollable-cell .scrollable-content {
-    overflow-y: auto !important; /* Enables vertical scrollbar if content exceeds cell height */
-    white-space: normal; /* Allows text to wrap to next line */
-    max-height: 25px !important; /* Set a specific height */
+.table-container{
+    display: block;
+    width: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 }
-.table .td.scrollable-cell .keyword-cell {
-    min-width: 300px !important;
+.table td, .table th {
+    font-size: 1em; /* Adjust as needed */
+    padding: 10px;
 }
-
-.table tr td:first-child {
-    min-width: 150px !important;
+.table td.scrollable-cell .scrollable-content {
+    white-space: normal;
+    max-height: 70px;
+    overflow-x: hidden;
 }
-@media screen and (max-width: 600px) {
-    .table {
+/* TALBE SIZES */
+@media screen and (min-width: 1900px) {
+    .header h1 {
+        font-size: 3.5em;
+    }
+    .logout-button {
+        font-size: 3em;
+    }
+    .toolbar h1 {
+        font-size: 1.2em;
     }
-}
 
-@media screen and (max-width: 600px) {
+    .pdfButton {
+        font-size: 1.2em;
+    }
+    #create-icon{
+        font-size: 2.5em;
+    }
+    input{
+        font-size: 2.5em;
+    }
     .table td, .table th {
-        font-size: 14px;
-        padding: 5px;
+        font-size: 2.2em;
     }
-
-    #edit-icon, #delete-icon {
-        min-width: 16px;
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 140px;
+    }
+    .edit-icon {
+        font-size: 2.5em;
+    }
+    .delete-icon {
+        font-size: 2.5em;
     }
 }
 
-@media screen and (max-width: 400px) {
-    .table td, .table th {
-        font-size: 12px;
-        padding: 2px;
+@media screen and (min-width: 1500px) {
+    .header h1 {
+        font-size: 3em;
+    }
+    .logout-button {
+        font-size: 2.5em;
+    }
+    .toolbar h1 {
+        font-size: 1em;
     }
 
-    #edit-icon, #delete-icon {
-        min-width: 12px;
+    .pdfButton {
+        font-size: 1em;
+    }
+    #create-icon{
+        font-size: 2em;
+    }
+    input{
+        font-size: 2em;
+    }
+    .table td, .table th {
+        font-size: 1.8em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 120px;
+    }
+    .edit-icon {
+        font-size: 2em;
+    }
+    .delete-icon {
+        font-size: 2em;
     }
 }
 
-.table tr {
-    height: 10%;
-}
-body {
-    margin: 0;
-    padding: 0;
-}
-.header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #007BFF;
-    padding: 0.2vw;
-    box-sizing: border-box;
-}
+@media screen and (min-width: 1000px) {
+    .header h1 {
+        font-size: 2.5em;
+    }
+    .logout-button {
+        font-size: 2em;
+    }
+    .toolbar h1 {
+        font-size: 0.75em;
+    }
 
-.pdfButton {
-    font-size: 0.5em;
-    padding: 1em;
-    margin : 0.25em;
-    width: auto;
-    white-space: normal;
-    text-align: center;
-}
-.toolbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-i.fas.fa-arrow-left {
-    z-index: 1;
-    pointer-events: auto;
-}
-.button-group {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    z-index: 1;
+    .pdfButton {
+        font-size: 0.75em;
+    }
+    #create-icon{
+        font-size: 1.75em;
+    }
+    input{
+        font-size: 1.75em;
+    }
+    .table td, .table th {
+        font-size: 1.5em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 100px;
+    }
+    .edit-icon {
+        font-size: 1.25em;
+    }
+    .delete-icon {
+        font-size: 1.25em;
+    }
 }
-.header button {
-    margin-right: auto;
+
+@media screen and (max-width: 800px) {
+    .header h1 {
+        font-size: 1em;
+    }
+    .logout-button {
+        font-size: 0.8em;
+    }
+    .toolbar h1 {
+        font-size: 0.3em;
+    }
+
+    .pdfButton {
+        font-size: 0.3em;
+    }
+    #create-icon{
+        font-size: 0.7em;
+    }
+    input{
+        font-size: 0.7em;
+    }
+    .table td, .table th {
+        font-size: 0.7em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 30px;
+    }
+    .edit-icon {
+        font-size: 0.75em;
+    }
+    .delete-icon {
+        font-size:  0.75em;
+    }
+    .table td, .table th{
+        width: 90%;
+    }
 }
-.logout-button {
-    position: relative;
+
+@media screen and (max-width: 700px) {
+    .header h1 {
+        font-size: 0.9em;
+    }
+
+    .logout-button {
+        font-size: 0.6em;
+    }
+    .toolbar h1 {
+        font-size: 0.3em;
+    }
+
+    .pdfButton {
+        font-size: 0.3em;
+    }
+    #create-icon{
+        font-size: 0.6em;
+    }
+    input{
+        font-size: 0.6em;
+    }
+    .table td, .table th {
+        font-size: 0.6em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 25px;
+    }
+    .edit-icon {
+        font-size: 0.5em;
+    }
+    .delete-icon {
+        font-size:  0.5em;
+    }
+    .table td, .table th{
+        width: 80%;
+    }
 }
-.logout-button {
-    position: relative;
+
+@media screen and (max-width: 600px) {
+    .header h1 {
+        font-size: 0.8em;
+    }
+
+    .logout-button {
+        font-size: 0.5em;
+    }
+    .toolbar h1 {
+        font-size: 0.2em;
+    }
+
+    .pdfButton {
+        font-size: 0.2em;
+    }
+    #create-icon{
+        font-size: 0.5em;
+    }
+    input{
+        font-size: 0.5em;
+    }
+    .table td, .table th {
+        font-size: 0.5em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 18px;
+    }
+    .edit-icon {
+        font-size: 0.25em;
+    }
+    .delete-icon {
+        font-size:  0.25em;
+    }
+    .table td, .table th{
+        width: 70%;
+    }
 }
-html, body {
-    margin: 0;
-    padding: 0;
+
+@media screen and (max-width: 500px) {
+    .header h1 {
+        font-size: 0.7em;
+    }
+
+    .logout-button {
+        font-size: 0.4em;
+    }
+    .toolbar h1 {
+        font-size: 0.18em;
+    }
+
+    .pdfButton {
+        font-size: 0.18em;
+    }
+    #create-icon{
+        font-size: 0.4em;
+    }
+    input{
+        font-size: 0.4em;
+    }
+    .table td, .table th {
+        font-size: 0.4em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 17px;
+    }
+    .edit-icon {
+        font-size: 0.225em;
+    }
+    .delete-icon {
+        font-size: 0.225em;
+    }
+    .table td, .table th{
+        width: 60%;
+    }
 }
-.page{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 20px;
+
+@media screen and (max-width: 400px) {
+    .header h1 {
+        font-size: 0.6em;
+    }
+    .logout-button {
+        font-size: 0.35em;
+    }
+    .toolbar h1 {
+        font-size: 0.15em;
+    }
+
+    .pdfButton {
+        font-size: 0.15em;
+    }
+    #create-icon{
+        font-size: 0.35em;
+    }
+    input{
+        font-size: 0.35em;
+    }
+    .table td, .table th {
+        font-size: 0.35em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 20px;
+    }
+    .edit-icon {
+        font-size: 0.2em;
+    }
+    .delete-icon {
+        font-size: 0.2em;
+    }
+    .table td, .table th{
+        width: 30%;
+    }
 }
-.page a{
-    padding:10px;
+
+@media screen and (max-width: 300px) {
+    .header h1 {
+        font-size: 0.5em;
+    }
+    .logout-button {
+        font-size: 0.3em;
+    }
+    .toolbar h1 {
+        font-size: 0.13em;
+    }
+
+    .pdfButton {
+        font-size: 0.13em;
+    }
+    #create-icon{
+        font-size: 0.3em;
+    }
+    input{
+        font-size: 0.3em;
+    }
+    .table td, .table th {
+        font-size: 0.3em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 20px;
+    }
+    .edit-icon {
+        font-size: 0.175em;
+    }
+    .delete-icon {
+        font-size: 0.175em;
+    }
+    .table td, .table th{
+        width: 30%;
+    }
 }
 
-.edit-icon, #delete-icon {
-    min-width: 24px;
+@media screen and (max-width: 200px) {
+    .header h1 {
+        font-size: 0.4em;
+    }
+    .logout-button {
+        font-size: 0.25em;
+    }
+    .toolbar h1 {
+        font-size: 0.1em;
+    }
+
+    .pdfButton {
+        font-size: 0.1em;
+    }
+    #create-icon{
+        font-size: 0.25em;
+    }
+    input{
+        font-size: 0.25em;
+    }
+    .table td, .table th {
+        font-size: 0.25em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 15px;
+    }
+    .edit-icon {
+        font-size: 0.15em;
+    }
+    .delete-icon {
+        font-size: 0.15em;
+    }
+    .table td, .table th{
+        width: 20%;
+    }
 }
+
 .edit-icon {
     color: #ffa600;
     margin-right: 2px;
     margin-left: 2px;
-    font-size: 20px;
+    font-size: 1em;
 }
 .delete-icon {
     color: red;
     margin-left: 2px;
-    font-size: 20px;
+    font-size: 1em;
 }
 #create-icon {
     color: green;
-    font-size: 20px;
+    font-size: 1em;
 }
 .inactive {
     pointer-events: none;
@@ -230,13 +518,12 @@ html, body {
 .modal p{
     font-size: 20px;
 }
-.scrollable-table {
-    overflow-x: auto;
-}
-
-.hide-icon {
-    display: none;
+.page{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
 }
-
-
-
+.page a{
+    padding:10px;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/list/alumnos.html b/src/main/resources/templates/list/alumnos.html
index e054e90..8c4c469 100644
--- a/src/main/resources/templates/list/alumnos.html
+++ b/src/main/resources/templates/list/alumnos.html
@@ -10,13 +10,6 @@
     <meta charset="UTF-8">
     <title>Lista: Alumnos</title>
     <style>
-        .nombre-cell{
-            width: 200px;
-        }
-        .table td.scrollable-cell .skill-cell {
-            width: 150px;
-            min-height: 50px;
-        }
     </style>
 </head>
 <body>
@@ -42,7 +35,7 @@
 </div>
 
 <div class="scrollable-table">
-    <table class="table" id="table">
+    <table class="table table-hover table-bordered" id="table">
         <thead class="thread-light">
         <tr>
             <th class="table-header">
@@ -115,8 +108,10 @@
             <tr class="cell" th:each="alumno :${alumnos}" th:data-id="${alumno.id}">
                 <td>
                     <div class ="nombre-cell">
-                        <i class="edit-icon fas fa-pen-square hide-icon"></i>
-                        <i class="delete-icon fas fa-ban hide-icon"></i>
+                        <div class="icon-content">
+                            <i class="edit-icon fas fa-pen-square"></i>
+                            <i class="delete-icon fas fa-ban"></i>
+                        </div>
                         [[${alumno.nombre}]]
                     </div>
                 </td>
@@ -130,13 +125,13 @@
                 <td>[[${alumno.correo2}]]</td>
                 <td>[[${alumno.nacionalidad}]]</td>
                 <td class="scrollable-cell">
-                    <div class="scrollable-content skill-cell">
+                    <div class="scrollable-content" th:utext="${#strings.replace(alumno.keywords, ',', ',&lt;br&gt;')}">
                         [[${alumno.keywords}]]
                     </div>
                 </td>
                 <td>[[${alumno.ciclo.nombre}]]</td>
                 <td class="scrollable-cell">
-                    <div class="scrollable-content skill-cell">
+                    <div class="scrollable-content">
                     <span th:each="skill : ${alumno.skills}" th:text="${skill.nombre} + ' '"></span>
                     </div>
                 </td>
@@ -316,7 +311,7 @@
                 <td>${alumno.correo2}</td>
                 <td>${alumno.nacionalidad}</td>
                 <td class="scrollable-cell keyword">
-                    <div class="scrollable-content skill-cell">
+                    <div class="scrollable-content">
                         ${alumno.keywords}
                     </div>
                 </td>
@@ -324,7 +319,7 @@
                         ${alumno.ciclo.nombre}
                     </td>
                  <td class="scrollable-cell">
-                    <div class="scrollable-content skill-cell">
+                    <div class="scrollable-content">
                     ${alumno.skills.map(skill => skill.nombre).join(', ')}
                     </div>
                 </td>
diff --git a/src/main/resources/templates/list/ciclos.html b/src/main/resources/templates/list/ciclos.html
index 03eecbc..e1d3062 100644
--- a/src/main/resources/templates/list/ciclos.html
+++ b/src/main/resources/templates/list/ciclos.html
@@ -35,7 +35,7 @@
     </div>
 </div>
 <div class="table-container">
-    <table class="table" id="table">
+    <table class="table table-hover table-bordered" id="table">
         <thead class="thread-light">
         <tr>
             <th class="table-header">
@@ -57,8 +57,10 @@
         <tbody>
         <tr class="cell" th:each="ciclo :${ciclos}" th:data-id="${ciclo.id}">
             <td>
-                <i class="edit-icon fas fa-pen-square hide-icon"></i>
-                <i class="delete-icon fas fa-ban hide-icon"></i>
+                <div class="icon-content">
+                    <i class="edit-icon fas fa-pen-square"></i>
+                    <i class="delete-icon fas fa-ban"></i>
+                </div>
                 [[${ciclo.nombre}]]
             </td>
             <td>[[${ciclo.codigo}]]</td>
diff --git a/src/main/resources/templates/list/contactos.html b/src/main/resources/templates/list/contactos.html
index 052afe0..6b78665 100644
--- a/src/main/resources/templates/list/contactos.html
+++ b/src/main/resources/templates/list/contactos.html
@@ -36,7 +36,7 @@
 </div>
 
 <div class="table-container">
-    <table class="table" id="table">
+    <table class="table table-hover table-bordered" id="table">
         <thead class="thread-light">
         <tr>
             <th class="table-header">
@@ -74,8 +74,10 @@
         <tbody>
         <tr class="cell" th:each="contacto :${contactos}" th:data-id="${contacto.id}">
             <td>
-                <i class="edit-icon fas fa-pen-square hide-icon"></i>
-                <i class="delete-icon fas fa-ban hide-icon"></i>
+                <div class="icon-content">
+                    <i class="edit-icon fas fa-pen-square"></i>
+                    <i class="delete-icon fas fa-ban"></i>
+                </div>
                 [[${contacto.nombre}]]
             </td>
             <td>[[${contacto.apellido}]]</td>
diff --git a/src/main/resources/templates/list/empresas.html b/src/main/resources/templates/list/empresas.html
index 321c210..bba9556 100644
--- a/src/main/resources/templates/list/empresas.html
+++ b/src/main/resources/templates/list/empresas.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
-    <link rel="stylesheet" type="text/css" th:href="@{/style.css}">
+     <link rel="stylesheet" type="text/css" th:href="@{/style.css}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
@@ -10,10 +10,9 @@
     <meta charset="UTF-8">
     <title>Lista Empresas</title>
     <style>
-        .table td.scrollable-cell .skill-cell {
-            width: 300px;
-            min-height: 50px;
-        }
+
+        /*-- HEADER--*/
+
     </style>
 </head>
 <body>
@@ -39,7 +38,7 @@
 </div>
 
 <div class="table-container">
-    <table class="table" id="table">
+    <table class="table table-hover table-bordered" id="table">
         <thead class="thread-light">
         <tr>
             <th class="table-header">
@@ -78,20 +77,22 @@
         <tr class="cell" th:each="empresa :${empresas}" th:data-id="${empresa.id}">
 
             <td>
-                <i class="edit-icon fas fa-pen-square hide-icon"></i>
-                <i class="delete-icon fas fa-ban hide-icon"></i>
+                <div class="icon-content">
+                    <i class="edit-icon fas fa-pen-square"></i>
+                    <i class="delete-icon fas fa-ban"></i>
+                </div>
                 [[${empresa.nombre}]]
             </td>
             <td>[[${empresa.cif}]]</td>
             <td>[[${empresa.correo}]]</td>
             <td>[[${empresa.telefono}]]</td>
             <td class="scrollable-cell">
-                <div class="scrollable-content skill-cell">
-                    [[${empresa.keywords}]]
+                <div class="scrollable-content" th:utext="${#strings.replace(empresa.keywords, ',', ',&lt;br&gt;')}">
+                    <!-- Keywords will be inserted here with <br> tags after each comma -->
                 </div>
             </td>
             <td class="scrollable-cell">
-                <div class="scrollable-content skill-cell">
+                <div class="scrollable-content">
                 [[${empresa.sector.nombre}]]
                     </div>
             </td>
@@ -153,9 +154,7 @@
     }
 
     var $table = $('#table');
-    var $modalDelete = $('#modalDelete');
     var $myInput = $('#myInput');
-    var $createIcon = $('#create-icon');
     var isSearchBarUsed = false;
 
     $table.on('click', '.edit-icon', function (event) {
@@ -390,12 +389,12 @@
                     <td>${empresa.correo}</td>
                     <td>${empresa.telefono}</td>
                     <td class="scrollable-cell">
-                        <div class="scrollable-content skill-cell">
+                        <div class="scrollable-content">
                             ${empresa.keywords}
                         </div>
                     </td>
                     <td class="scrollable-cell">
-                        <div class="scrollable-content skill-cell">
+                        <div class="scrollable-content">
                             ${empresa.sector.nombre}
                         </div>
                     </td>
diff --git a/src/main/resources/templates/list/familias.html b/src/main/resources/templates/list/familias.html
index 3d17238..6aaae77 100644
--- a/src/main/resources/templates/list/familias.html
+++ b/src/main/resources/templates/list/familias.html
@@ -34,7 +34,7 @@
 </div>
 
 <div class="table-container">
-    <table class="table" id="table">
+    <table class="table table-hover table-bordered" id="table">
         <thead class="thread-light">
         <tr>
             <th class="table-header">
@@ -47,8 +47,12 @@
         <tr class="cell" th:each="familia :${items}" th:data-id="${familia.id}">
 
             <td>
-                <i class="edit-icon fas fa-pen-square hide-icon"></i>
-                <i class="delete-icon fas fa-ban hide-icon"></i>
+                <!--<i class="edit-icon fas fa-pen-square hide-icon"></i>
+                <i class="delete-icon fas fa-ban hide-icon"></i>-->
+                <div class="icon-content">
+                    <i class="edit-icon fas fa-pen-square"></i>
+                    <i class="delete-icon fas fa-ban"></i>
+                </div>
                 [[${familia.nombre}]]
             </td>
         </tr>
diff --git a/src/main/resources/templates/list/ofertas.html b/src/main/resources/templates/list/ofertas.html
index e314534..bbb89dd 100644
--- a/src/main/resources/templates/list/ofertas.html
+++ b/src/main/resources/templates/list/ofertas.html
@@ -10,10 +10,7 @@
     <meta charset="UTF-8">
     <title>Lista Ofertas</title>
     <style>
-        .table td.scrollable-cell .skill-cell {
-            width: 250px;
-            min-height: 50px;
-        }
+
     </style>
 </head>
 <body>
@@ -39,7 +36,7 @@
 </div>
 
 <div class="scrollable-table">
-    <table class="table" id="table">
+    <table class="table table-hover table-bordered" id="table">
         <thead class="thread-light">
         <tr>
             <th class="table-header">
@@ -75,20 +72,22 @@
         <tbody>
         <tr class="cell" th:each="oferta :${ofertas}" th:data-id="${oferta.id}">
             <td>
-                <i class="edit-icon fas fa-pen-square hide-icon"></i>
-                <i class="delete-icon fas fa-ban hide-icon"></i>
+                <div class="icon-content">
+                    <i class="edit-icon fas fa-pen-square"></i>
+                    <i class="delete-icon fas fa-ban"></i>
+                </div>
                 [[${oferta.nombre}]]
             </td>
             <td>[[${oferta.fecha}]]</td>
             <td>[[${oferta.descripcion}]]</td>
             <td>[[${oferta.sucursal.nombre}]]</td>
             <td class="scrollable-cell">
-                <div class="scrollable-content skill-cell">
+                <div class="scrollable-content">
                     [[${oferta.ciclo.nombre}]]
                 </div>
             </td>
             <td class="scrollable-cell">
-                <div class="scrollable-content skill-cell">
+                <div class="scrollable-content">
                 <span th:each="skill : ${oferta.skills}" th:text="${skill.nombre} + ' '"></span>
                 </div>
             </td>
@@ -265,12 +264,12 @@
             <td>${oferta.descripcion}</td>
             <td>${oferta.sucursal.nombre}</td>
             <td class="scrollable-cell">
-                <div class="scrollable-content skill-cell">
+                <div class="scrollable-content ">
                     ${oferta.ciclo.nombre}</td>
                 </div>
             </td>
            <td class="scrollable-cell">
-                    <div class="scrollable-content skill-cell">
+                    <div class="scrollable-content">
                 ${oferta.skills.map(skill => skill.nombre).join(', ')}
                 </div>
             </td>
diff --git a/src/main/resources/templates/list/sectores.html b/src/main/resources/templates/list/sectores.html
index 74e1ab4..94ad97c 100644
--- a/src/main/resources/templates/list/sectores.html
+++ b/src/main/resources/templates/list/sectores.html
@@ -36,7 +36,7 @@
 </div>
 
 <div class="table-container">
-    <table class="table" id="table">
+    <table class="table table-hover table-bordered" id="table">
         <thead class="thread-light">
         <tr>
             <th class="table-header">
@@ -48,8 +48,10 @@
         <tbody>
         <tr class="cell" th:each="sector :${items}" th:data-id="${sector.id}">
             <td>
-                <i class="edit-icon fas fa-pen-square hide-icon"></i>
-                <i class="delete-icon fas fa-ban hide-icon"></i>
+                <div class="icon-content">
+                    <i class="edit-icon fas fa-pen-square"></i>
+                    <i class="delete-icon fas fa-ban"></i>
+                </div>
                 [[${sector.nombre}]]
             </td>
         </tr>
diff --git a/src/main/resources/templates/list/skills.html b/src/main/resources/templates/list/skills.html
index 5d7570c..ecb0f49 100644
--- a/src/main/resources/templates/list/skills.html
+++ b/src/main/resources/templates/list/skills.html
@@ -35,7 +35,7 @@
 </div>
 
 <div class="table-container">
-    <table class="table" id="table">
+    <table class="table table-hover table-bordered" id="table">
         <thead class="thread-light">
         <tr>
             <th class="table-header">
@@ -47,8 +47,10 @@
         <tbody>
         <tr class="cell" th:each="skill :${items}" th:data-id="${skill.id}">
             <td>
-                <i class="edit-icon fas fa-pen-square hide-icon"></i>
-                <i class="delete-icon fas fa-ban hide-icon"></i>
+                <div class="icon-content">
+                    <i class="edit-icon fas fa-pen-square"></i>
+                    <i class="delete-icon fas fa-ban"></i>
+                </div>
                 [[${skill.nombre}]]
             </td>
         </tr>
diff --git a/src/main/resources/templates/list/sucursales.html b/src/main/resources/templates/list/sucursales.html
index b482dbc..d001772 100644
--- a/src/main/resources/templates/list/sucursales.html
+++ b/src/main/resources/templates/list/sucursales.html
@@ -35,7 +35,7 @@
 </div>
 
 <div class="table-container">
-    <table class="table" id="table">
+    <table class="table table-hover table-bordered" id="table">
         <thead class="thread-light">
         <tr>
             <th class="table-header">
@@ -68,8 +68,10 @@
         <tbody>
         <tr class="cell" th:each="sucursal :${sucursales}" th:data-id="${sucursal.id}">
             <td>
-                <i class="edit-icon fas fa-pen-square hide-icon"></i>
-                <i class="delete-icon fas fa-ban hide-icon"></i>
+                <div class="icon-content">
+                    <i class="edit-icon fas fa-pen-square"></i>
+                    <i class="delete-icon fas fa-ban"></i>
+                </div>
                 [[${sucursal.nombre}]]
             </td>
             <td>[[${sucursal.localidad}]]</td>