0

Tengo una duda, tengo una tabla en la cual están los nombres de empleados y documento en las primeras columnas de la tabla y en las columnas siguientes se aprecia la información respectiva para cada uno, lo que pasa es que tengo un scrollbar horizontal por lo que la tabla queda muy grande, pero sí me desplazo hacia la derecha para ver el resto de la información se pierden las columnas nombre y documento por lo que hace complicado leer la tabla, la duda que tengo es, ¿Hay posibilidad de dejar esas columnas adheridas y cuando se desplace con el scroll se desplacen esas columnas también? Sí alguien me puede ayudar se lo agradezco

Adjunto captura de la tabla:

Imagen de la tabla

Adjunto el código html de la tabla:

<div class='d-flex justify-content-center' id="contentTable">
            <table class='table table-stripped' style="width: 150%" border=1 id="table">
                    <thead class= 'thead-dark'>

                    </thead>
                    <tbody>

                    </tbody>
            </table>
        </div>

La tabla la lleno después de hacer una petición con ajax, la lleno con jquery así:

$("table thead").html("");
                    $("table tbody").html("");

                    var thead = "<tr>"
                        + "<th>#</th>"
                        + "<th>Documento</th>"
                        + "<th>Nombre</th>";

                    for(let i=0; i < response["dias"].length; i++){
                        thead += "<th>"+ response["dias"][i]["dia"] +"</th>";
                    }
                        + "</tr>";
                    thead += "<tr> <th colspan='3'></th>";
                    for(let i=0; i < response["dias"].length; i++){
                        thead += "<th>"+ response["dias"][i]["fecha"] +"</th>";
                    }
                        thead += "</tr>";
                    var tbody;
                    for (let i = 0; i < response["empleados"].length; i++) {
                        if(i%2 == 0){
                            tbody += "<tr class='table-active'>";
                        }else{
                            tbody += "<tr>";
                        }
                        tbody += "<td>"+ (i+1) +"</td>"
                        + "<td>"+response["empleados"][i]["documento"]+"</td>"
                        + "<td>"+response["empleados"][i]["nombres"]+ " " +response["empleados"][i]["apellidos"]+"</td>";
                        index = 0
                        for(let j = 0; j < response["dias"].length; j++){
                            if(response["datos"][i] != null  && typeof response["datos"][i][index] != "undefined"){
                                if(response["datos"][i][index]["dia"] == response["dias"][j]["fecha"]){
                                    var color = "";
                                    if(response["datos"][i][index]["siglas"] == "TC"){
                                        color = "#B7E1CD";
                                    }else if(response["datos"][i][index]["siglas"] == "VAC"){
                                        color = "#E69138";
                                    }else if(response["datos"][i][index]["siglas"] == "DP"){
                                        color = "#E06666";
                                    }else if(response["datos"][i][index]["siglas"] == "DC"){
                                        color = "#FFE599";
                                    }else if(response["datos"][i][index]["siglas"] == "MT"){
                                        color = "#F4C7C3";
                                    }else if(response["datos"][i][index]["siglas"] == "INC"){
                                        color = "#A41785";
                                    }else if(response["datos"][i][index]["siglas"] == "RT"){
                                        color = "#00B0F0";
                                    }else if(response["datos"][i][index]["siglas"] == "HE"){
                                        color = "#8064A2";
                                    }else if(response["datos"][i][index]["siglas"] == "SUSP"){
                                        color = "#C00000";
                                    }else if(response["datos"][i][index]["siglas"] == "NE"){
                                        color = "#C23B00";
                                    }

                                    if(color != null){
                                        tbody += "<td style='background-color: "+ color +"'>"+response["datos"][i][index]["siglas"]+"</td>";
                                    }else{
                                        tbody += "<td>"+response["datos"][i][index]["siglas"]+"</td>";
                                    }
                                    index++;
                                }else{
                                    tbody += "<td> </td>";
                                }
                            }else{
                                tbody += "<td> </td>";
                            }
                        }
                        tbody += "</tr>";
                    }
                    $("table thead").append(thead);
                    $("table tbody").append(tbody);
2

1 respuesta 1

2

Estimado, te comento que existe un plugin que pinta tablas llamado DataTables el cual dentro de sus cualidades (de por si bien personalizables) existe una propiedad llamada "fixedColumns" expresado de la siguiente manera:

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   {
            leftColumns: 1,
            rightColumns: 1
        }
    } );
} );
th,
td {
  white-space: nowrap;
}

div.dataTables_wrapper {
  width: 800px;
  margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<link href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>



<table id="example" class="stripe row-border order-column" style="width:100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Ashton</td>
      <td>Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
      <td>1562</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

No olvidar que para inicializar estas propiedades debes ingresar las librerias del plugin citadas en este enlance, cualquier consulta no dudes en preguntar.

EDIT: Estimado, si por casualidad estuvieses un poco complicado con el diseño intenta esto:

Debes asignar position: absolute a la columna que quieres dejar fija y padding-left: 74.5px!important; a la columna que sigue para que pueda verse.

table {
  display: block;
  overflow-x: auto;
}

.static {
  position: absolute;
  background-color: white;
}

.first-col {
  padding-left: 94.5px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table">
  <thead>
    <tr>
      <th class="static" scope="col">FIJAR</th>
      <th class="first-col" scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="static" scope="row">FIJAR</th>
      <td class="first-col">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th class="static" scope="row">FIJAR</th>
      <td class="first-col">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th class="static" scope="row">FIJAR</th>
      <td class="first-col">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
  </tbody>
</table>

Código de respuesta en este enlace

9
  • Sabes depronto por qué se da este error? DataTables warning: table id=table - FixedColumns is not needed (no x-scrolling in DataTables enabled), so no action will be taken. Use 'FixedHeader' for column fixing when scrolling is not enabled
    – DaxTter77
    el 28 ago. 2019 a las 18:01
  • Ese error estimado da cuando no incluyes el CSS del complemento Fixed Table Plugins y librería FIxed Clomuns de DataTables
    – harifo
    el 28 ago. 2019 a las 18:04
  • El problema es que sí lo implemento, me jode el diseño que ya tengo
    – DaxTter77
    el 28 ago. 2019 a las 18:05
  • @DaxTter77 esta es la mejor solución que tienes. DataTables funciona muy bien. No es dificil adaptar los estilos. Los demás plugins de tablas, al menos los que he probado yo, no funcionan 100% bien
    – Emeeus
    el 28 ago. 2019 a las 18:39
  • 1
    Hice lo que pude hasta que ya, muchas gracias, hice fue lo del dataTable
    – DaxTter77
    el 30 ago. 2019 a las 20:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.