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

ribarraaribarraa 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 ? "&nbsp; <span class='color: #064c92'>Mostrando <strong>_TOTAL_</strong> Material(es) agregado(s)</span>" : "&nbsp; <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

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

This discussion has been closed.