First column of my DataTable has same width that all DataTable header - ajax

Question

I set the headers of my DataTable dynamically
for (i = 0; i < nvs; i++) {
var id = i + 1;
$("#headersgrid").append(
'<th id="header' + id + '">header</th>'
);
parametros[i] = $("#vsdata" + id).text();
$("#header" + id).text(parametros[i]);
}
After that I have this code for my Ajax request:
$("#spresultado-datatable").DataTable({
responsive: true,
destroy: true,
"processing": true,
"serverSide": false,
"filter": true,
"ordering": true,
//"autoWidth": false,
"language": {
"processing": "Procesando...",
"lengthMenu": "Mostrar _MENU_ registros por pagina",
"zeroRecords": "No se encontraron resultados",
"info": "Mostrando pagina _PAGE_ de _PAGES_",
"infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"infoFiltered": "(filtrado de un total de _MAX_ registros)",
"paginate": {
"first": "Primero",
"last": "Último",
"next": "Siguiente",
"previous": "Anterior"
}
},
"ajax": {
"url": "/Spconsumer/Ejecutar",
"type": "POST",
"data": DTO,
"datatype": "json",
"dataSrc": function (response) {
var i = 0;
var j = 0;
for (j = 0; j < response.data.length; j++) {
columns = [];
$.each(response.data[j].parametro, function (key, value) {
var my_item = {};
var id = i + 1;
my_item.data = value;
my_item.name = parametros[i];
//my_item.autoWidth = true;
columns.push(value);
i++;
});
data.push(columns);
}
return data;
},
"columnDefs": [
{ "autoWidth": true , "targets": 0 }
]
}
});
I get the data correctly and pass it to my Index.cshtml in order to show the table:
<div class="users-list-table" id="gridresultadosp">
<div class="card">
<div class="card-header row">
<div class="col-12 col-sm-6 col-lg-8">
<h1 class="card-title">Spconsumer - Resultado Ejecucion SP</h1>
</div>
</div>
<div class="card-content">
<div class="card-body">
<!-- datatable start -->
<div class="table-responsive">
<table id="spresultado-datatable" class="table mb-0">
<thead>
<tr id="headersgrid">
</tr>
</thead>
</table>
</div>
<!-- datatable ends -->
</div>
</div>
</div>
</div>
I am getting the data correctly in my Html but I have a problem with the first column:
As you can see in the image the data loads correctly, ordering and filtering work ok but the width of the first column spans the full width of the entire header of the data table. I tried everything, search the internet without success, please if someone can guide me on how to solve it

Answer 1

I managed to resolve the problem:
I changed:
for (i = 0; i < nvs; i++) {
var id = i + 1;
$("#headersgrid").append(
'<th id="header' + id + '">header</th>'
);
parametros[i] = $("#vsdata" + id).text();
$("#header" + id).text(parametros[i]);
}
To
for (i = 0; i < nvs; i++) {
var id = i + 1;
parametros[i] = $("#vsdata" + id).text();
$("#headersgrid").append(
'<th>' + parametros[i] + '</th>'
);
}
Using <th id="header' + id + '">header</th> was the origin of the problem