Question

Technologies:

javascript

html

css

jquery

Tolerim

24 days ago

It is impossible to turn off horizontal scrolling in the Datatables header.

I have been utilizing datatables on my organization's website, but I have encountered some issues. The latest versions of Chrome and Edge (with the older versions working fine) have caused some problems. One issue pertains to the datatable headers. Previously, the tables moved horizontally, with the header and body parts attached and moving together. However, the header and body parts are now completely independent, with the header appearing to have a horizontal scroller suddenly (as shown in the screenshot below).

I attempted to resolve this issue by setting the header position as sticky and overflow-x as hidden, but to no avail. I've included some parts of my PHP script's code that I believe may be related to the issue. I can provide further details if necessary. Below is the CSS part:


div.dataTables_scrollHead {

  position: sticky !important;

  overflow-x: hidden;

  top: 0px;

  z-index: 99;

  background-color: white;

  box-shadow: 0px 5px 5px 0px rgba(82, 63, 105, 0.08);

}

table.dataTable thead .sorting {

    background: url("") no-repeat scroll right center rgba(0, 0, 0, 0);

                overflow-x: hidden;

}

table.datatable th {

                font-size: 10px;

                position: sticky;

                overflow-x: hidden;

}

 

table.datatable td {

                font-size: 9px;

}

div.dt-buttons {

                position:relative;

                bottom: 65px;

                left: 263px;

                width: 30%;

                }

img.btn-excel {

                width: 8%;

                  cursor: pointer;

                }

Here is the Datatable part of the code:


$(document).ready(function() {

                    var table= $('#example').dataTable( {

       "processing": true,

       "serverSide": true,

       responsive: true,

       scrollX: true,

       scrollCollapse: true,

       fixedHeader: {

                header: true,

                footer: true

            },

       "ajax": {

        "url": "example.php",

              "rowCallback": function( row, data ) {

                if ( $.inArray(data.DT_RowId, selected) !== -1 ) {

                    $(row).addClass('selected');

                }

            }

              },

                                  

        dom: 'lBfrtip',

    } );

Lastly, this is the HTML part of the table head:


    <div class="space"> &nbsp;</div>

    <div class="cdn">

     

    <table id="example" class="datatable display nowrap cell-border compact" cellspacing="0" width="100%">

     

     

            <thead style="border-bottom: 0 solid; position:sticky; overflow-x: hidden;">

Answers(2)

Tolerim

24 days ago

It seems like the issue you are facing is related to how the header and body parts of the table are attached to each other and move together. From the CSS code you provided, it looks like you have already tried setting the header position as sticky and overflow-x as hidden, but they didn't work for you. One thing you could try is setting the position of the table headers to be fixed instead of sticky, which should prevent the horizontal scrolling issue you are experiencing. You could also remove the overflow-x property as it might not be necessary anymore. Here's an updated version of the relevant CSS code:

position: fixed !important;
  top: 0;
  z-index: 99;
  background-color: white;
  box-shadow: 0px 5px 5px 0px rgba(82, 63, 105, 0.08);
}

table.dataTable thead .sorting {
  background: url('') no-repeat scroll right center rgba(0, 0, 0, 0);
}

table.datatable th {
  font-size: 10px;
  position: fixed;
}

table.datatable td {
  font-size: 9px;
}

Please note that this is just a suggestion based on the information you provided. It might not solve your issue completely, but could be a step in the right direction.

Accepted Answer

It seems that the issue you are facing is related to the horizontal scrolling of the table header and body parts. According to this StackOverflow post, when scrolling is enabled in DataTables using scrollX or scrollY parameters, it will split the entire table into two or three individual HTML table elements; the header, the body and, optionally, the footer. This is done in order to provide the ability to scroll the different sections of the DataTable in a cross-browser manner. One solution suggested in the same post is to adjust headers when collapsible element becomes visible. For example, for Bootstrap Collapse plugin:

$($.fn.dataTable.tables(true)).DataTable()
       .columns.adjust();
});

Another StackOverflow post suggests that if the table is in the collapsible element, you need to adjust headers when collapsible element becomes visible.

$($.fn.dataTable.tables(true)).DataTable()
       .columns.adjust();
});

I hope this helps! Let me know if you have any further questions.

Sources

Can't disable horizontal scroll in Datatables header datatable jquery - table header width not aligned with body width Header is misaligned with the body of the DataTable 6. Warning: Possible column misalignment - DataTables