Skip to main content
añadida la respuesta de ID 613886 como contenido suplementario
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

ya elimine la fila oculta que tenia y probe poniendo width fijos tanco con css que en el mismo datatable pero sigue haciendo el mismo efecto, lo hace solo cuando le agrego la linea fixedColumns: true, para dejar la primera columan fija cuando se utiliza el scrol vertical .


ya elimine la fila oculta que tenia y probe poniendo width fijos tanco con css que en el mismo datatable pero sigue haciendo el mismo efecto, lo hace solo cuando le agrego la linea fixedColumns: true, para dejar la primera columan fija cuando se utiliza el scrol vertical .

se añadieron 107 caracteres en el cuerpo
Origen Enlace

veo que el problema es al agregarle el fixedColumns: true,

para que la primera columan se quede fija

veo que el problema es al agregarle el fixedColumns: true,

para que la primera columan se quede fija

Origen Enlace

Headers y body no se alinean al cambiar el tamaño de la pantalla

tengo esta tabla en c#, la cual la lleno con ajax

  <table id="Colocacion" class="table table-bordered table-striped">
      <thead>
          <tr>
              <th style="visibility:collapse; display:none;">Orden</th>
              <th >Productos</th>
              <th>Objetivo</th>
              <th>Real</th>
              <th>Var Q</th>
              <th>Var %</th>
              <th>Pedidos</th>
              <th>Ticket Real Q</th>
              <th>Asesores</th>
              <th>Prod Req Q. </th>
              <th>Prod Real Q. </th>
              <th>Prod Real #</th>
              <th>Prod Compromiso Q.</th>
              <th>Prod Compromiso #</th>
              <th>Nuevo #</th>
              <th>Recompra #</th>
              <th>Renovacion #</th>
          </tr>
      </thead>
      <tfoot></tfoot>
  </table>



 var tabla = $('#Colocacion').DataTable({
     bPaginate: false,
     paging: false,
     searching: false,
     info: false,
     destroy: true,
     responsive: false,
     lengthChange: true,
     autoWidth: false,
     ordering: false,
    
     scrollCollapse: true,
     scrollX: true,
     scrollY: 400,
     fixedHeader: true,
     
     ajax: {
         method: "GET",
         url: "/ReportCol/Productos",
         data: {
               TipoGrafica: true
             , IdTerritorio: Territorio
             , IdRegion: Region
             , Sucursal: Sucursal
             , Producto: Producto
             , SemanaIni: SemanaIni
             , SemanaFin: SemanaFin
             , Anio: Anio
             , Formatos: Formatos
             , Criterios: CriteriosS
             , Dia: Dia
             , FechaIni: FecIni
             , FechaFin: FecFin
             , Clasificacion: Clasificacion
             , Orden: Orden
             , Columna: Columna
         },
         contentType: "aplication/json;  charset = utf-8",
         dataType: "json",
         dataSrc: ""
     },
     columns: [
         { "data": "orden" },
         { "data": "rubro" },
         { "data": "meta"},
         { "data": "real"},
         { "data": "diferencia",
             render: function (data, type, row, meta) {
                 if (row.positivo) {
                     return '<span>' + data + ' </span>'
                 }
                 else  {
                         return '<span class="text-danger">' + data.replace("-", "") + ' <i class="text-danger fas fa-caret-down"></span>'
                 }
             },
         },
         { "data": "porcentaje",
             render: function (data, type, row, meta) {
                 if (row.positivo) {
                     return '<span class="description-percentage  ml-2" >' + data + '%</span>'
                 }
                 else  {
                         return '<span class="description-percentage text-danger ml-2" >' + data.replace("-", "") + '% <i class="text-danger fas fa-caret-down"></span>'
                 }
             },
         },
         { "data": "pedidos" },
         {"data": "ticketReal" },
         {"data": "asesores" },
         {"data": "metaPQ2"},
         {"data": "realPQ"},
         {"data": "realPN" },
         {"data": "metaPQ"},
         {"data": "metaPN"},
         {"data": "nuevo"},
         {"data": "recompra"},
         {"data": "renovacion"},
     ],
     columnDefs: [
         {
             target: 0,
             visible: false,
             searchable: false,
         },
                  {
                 targets: [4,5], 
                 width: 100,   
             }
     ],
     createdRow: function (row, data, dataIndex) {
           $('td:eq(2)', row).css('background-color', '#f9f2a1 !important');
     }
 });

le puse un scroll vertical como horizontal , pero al momento de que la pantalla cambie de tamaño los headers con las columnas de los datos se desajustan , se desalinean si recargo la pagina se vuelven a alinear como podria hacer para que si cambia el tamaño de la pantalla se alineen bien los headers con el body ,

le agregue un fixColumns: true y un fixHeader:True pero sigue haciendo el mismo efecto, necesito que cuand cambie de tamaño los encabezados y el body se alinean bien.

introducir la descripción de la imagen aquí