Why my datatable Fixed header doesn`t work /

Question

I am trying to make my data table Thead a sticky one but when i tried fixed header than it doesn't work . I have tried position: fixed; , top: 0; and try to fix it with css but when a done this action than it works in firefox as expected but it doesn't work as expected in crome edge opera .

    "stateSave": false,
    "orderCellsTop": true,
    "fixedHeader": {
        header: true,
    },
    "columns": [
    {'data':'chk_select_header','orderable': false},

Here is my code of ajax .

Answer 1

I had tried to fixed my thead here in my data table . But this data table fixed that thead to the top of there page like this https://datatables.net/extensions/fixedheader/examples/options/simple.html but i wanted to make sticky to that data table div . i found only way to do it is using this below CSS method

thead tr:first-child th {
    position: sticky;
    z-index: 12;
    top: 0;
    background: white;
}

Or

thead th {
    position: sticky;
    z-index: 12;
    top: 51px;
    background: white;
}

This is the simplest method to sticky your data table header to the table head