Skip to main content
2 de 2
mcve y mejora en etiquetas
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

¿Como poner estatico el encabezado de una tabla html con jquery?

Tengo la siguiente table:

$('.listado_volumen_negocio > tr').remove();
var listado_volumen_negocio = $('.listado_volumen_negocio');
var response = {
  "data": [{
      "Nivel_Codigo": 1,
      "Nombre": "Juan",
      "VNIndividual": 4,
      "VNRed": 7,
      "Titulo": "10"
    },
    {
      "Nivel_Codigo": 2,
      "Nombre": "Pablo",
      "VNIndividual": 5,
      "VNRed": 8,
      "Titulo": "11"
    }
  ]
};
$.each(response.data, function(index, value) {
  $('<tr/>')
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').append("<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nivel_Codigo + "</p>" + "<p style='margin-bottom: 0px;margin-top: 0px;'>" + value.Nombre + "</p>"))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNIndividual)))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(moneda(value.VNRed)))
    .append($('<td style="font-size: 11px;"/>').addClass('label-cell nuevo-td').text(value.Titulo))
    .appendTo(listado_volumen_negocio);
});


function moneda(any) {
  return "$" + any;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card data-table nueva-table freeze-table">
  <table class="table">
    <thead>
      <tr>
        <th class="nuevo-td" rowspan="2" style="font-size: 11px;">Nombre</thd>
          <th colspan="2">Volumen de negocio</th>
          <th rowspan="2" class="label-cell nuevo-th" style="font-size: 11px;">Titulo</th>
      </tr>
      <tr>
        <th class="nuevo-td" style="font-size: 11px;">Individual</th>
        <td class="label-cell nuevo-th" style="font-size: 11px;">Red</th>
      </tr>
    </thead>
    <tbody id="listado_volumen_negocio" class="listado_volumen_negocio">
    </tbody>
  </table>
</div>

el tbody lo lleno dinamicamente.

Visualmente queda de esta forma:

introducir la descripción de la imagen aquí

Pero al seguir bajando en la tabla el encabezado se pierde y quiero que mientras vaya bajando la tabla el encabezado siga el registro para no perderlo.

JG_GJ
  • 703
  • 1
  • 14
  • 39