Inconsistent column header width

btgomez

Hi, I've got a problem when the user is navigating the page number. The column header are changing width. Is there any option to fixed the width of the columns? See image and source below.

    var dtallJob = $('#allJob').DataTable({
        "aLengthMenu": [[20, -1], [20, "All"]],
        iDisplayLength: 20,
        sScrollY: "50vh",
        bScrollInfinite: true, //this property disables pagination 
        "scrollCollapse": true,
        "pagingType": "simple_numbers",
        "lengthChange": false,
        "bInfo": false,
        "dom": 'lrtip',
        "bSort": true,
        "autoWidth": false
    });

When user click on page 5. The header column are consolidating.

Thanks.

colin

Hi @btgomez ,

It will because of the length of the data in the columns would be varying on each page. You can set a specific width for each column with columns.width,

Cheers,

Colin

btgomez

Thank you !