Datatables fixed column not aligned

Question

I'm making a Datatables page and I fixed the last column with FixedColumns.

However, this column is not aligned with the other lines.

This is my code to create the Datatables:

var table = $('#mytable').DataTable({
    ajax: {
        type: "POST",
        "url": 'my url',
        "dataSrc": "",
    },
    "createdRow": function(row, data, dataIndex) {
        if (data['main'] === "1") {
            $(row).addClass('maincontact');
        } else {
            $(row).addClass('secondcontact');
        }
    },
    "processing": true,
    "paging": true,
    "scrollY": true, 
    "scrollX": true,
    "deferRender": true,
    fixedColumns: {
        leftColumns: 0,
        rightColumns: 1
    },
    "order": [
        [4, "asc"]
    ],
    "autoWidth": true,
    select: {
        style: 'os',
        items: 'cell'
    },
    dom: 'Blfrtip',
    buttons: [{
        extend: 'csv',
        text: 'csv'
        },
        bom: true
    }],
    columnDefs: [{
        targets: tablesize, // tablesize = the last column
        data: null,
        render: function(data, type, row, meta) {
            if (data['main'] === "1") {
                return '<button type="button" class="btn btn-primary btn-update" >Update</button>';
            } else {
                return '<button type="button" class="btn btn-primary btn-update d-none" >Update</button>';
            }
        }
    }]
});
return table;

I already search on Datatables documentation and forum. I also search in StackOverflow but all the threads are about the fixedHeaders, but i don't have this option.

If someone has an idea, i take it.

Answer 1

I was having the same problem but it was solved when I added the css cdn for fixedColumns

<!-- cdn for fixedColumns in datatables -->    
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap.min.css">

Try it out, I hope that it works for others.

Answer 2

I found a solution. That's quite ugly but it does the job.

So I work with the css file.

.DTFC_RightBodyLiner {
top: -13px !important;
overflow-x: hidden;
}

I just add these lines. To explain, I override the CSS properties of the div with the class DTFC_RightBodyLiner. I changed "top" for a negative value and !important to move up the div and clear the misalignement. To hide the scrollbar, I added "overflow-x: hidden".

I hope this answer can help other people. If you have better ideas, I will be pleased to read it.