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.