why the header of my DataTable does not correspond to the width of the columns when I have scrollY
why the header of my DataTable does not correspond to the width of the columns when I have scrollY
ribarraa
Posts: 1Questions: 1Answers: 0
Why the header of my DataTable does not correspond to the width of the columns when I have scrollY = true and in view of iPhadPro Google Chome I turn the view.
My HTML it is this:
and JS it is this:
var mybuildDataTable = $("#listaMateriales").html('<table id="dataTableMateriales" cellpadding="1" cellspacing="1" class="table" ><thead style="width:auto"><tr style="color:black;"><th class="">Código</th><th class="">Material</th><th class="">U.Medida</th><th class="columnStyle_numero">Largo</th><th class="columnStyle_numero">Cantidad</th><th class="columnStyle_numero">Precio</th><th class="columnStyle_setting"></th></tr></thead><tbody></tbody></table>');
$("#dataTableMateriales", mybuildDataTable).DataTable({![](https://datatables.net/forums/uploads/editor/60/pjput9yfyhqm.png "")
autoWidth: true,
ordering: false,
paging: false,
lengthChange: false,
paging: false,
sScrollY: "300px",
sScrollX: false,
language: {
emptyTable: "Aún no se han agregado Materiales al listado.",
info: PedidosTerniumCA.dataMaterialListGrid.length > 1 ? " <span class='color: #064c92'>Mostrando <strong>_TOTAL_</strong> Material(es) agregado(s)</span>" : " <span class='color: #064c92'>Mostrando <strong>_TOTAL_</strong> Material agregado</span>",
infoEmpty: "",
},
searching: false,
data: filas,
columnDefs: [{ targets: [3, 4, 5], className: "columnStyle_numero", }, { targets: [6], className: "columnStyle_setting", }, ],
fixedHeader: {
header: true,
footer: true
}
});
In the image see the header wrong and columns well
Thx
This discussion has been closed.
Answers
Hi @ribarraa ,
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin