headers y columnas no se alinean al cambiar el tamaño de la pantalla

kevdanguz

tengo esta tabla en c#

Orden	Productos	Objetivo	Real	Var Q	Var %	Pedidos	Ticket Real Q	Asesores	Prod Req Q.	Prod Real Q.	Prod Real #	Prod Compromiso Q.	Prod Compromiso #	Nuevo #	Recompra #	Renovacion #

la cual la lleno con ajax

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

kevdanguz

veo que el problema se al agregar fixedColumns: true, para que la primer columan se quede fija

kthorngren

Its hard to say what the problem might be with out seeing it. Try these suggestions:

1. Make sure to use the proper style integration files for the styling framework being used. Use the Download builder to obtain the correct files.
2. Use style="width:100%" on the table tag, like this example to help with Datatables with the table width calculation.
3. If the Datatable is hidden when initialized then use `-api columns.adjust()1, when the table is shown, to adjust the column widths. See this example.

If this doesn't help then please post a link to your page or test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kevdanguz

si alguien le pasa lo mismo que al agregar scroolx y fixedcolumns los headerws se dealinean al la pantalla cambiar de tamaño lo solucien asi

    // ajusta los headres con el body cuando la pantlla cambia de tamaño
    $(window).on('resize', function () {
            $($.fn.dataTable.tables(true)).DataTable()
                    .columns.adjust();
    });

verifico si la pantalla cambio de tamaño y ajusto todos mis datables