Fixing jQuery DataTables header non-responsive issue

Fixing jQuery DataTables header non-responsive issue

jQuery DataTables renders table into two parts: 

  • header, <div class=”dataTables_scrollHeadInner”><div class=”dataTable”>
  • body, <div class=”dataTables_scrollBody”>

DataTables measures the current screen size and set the fixed width. In this case when resizing the browser, the table header and body are not resized automatically.

The solution is to enforce their width to be set in percentage. The following code is the final.

.dataTable,
.dataTables_scrollHeadInner,
.dataTables_scrollBody{
     width:100% !important;
}
datatable-non-responsive

Note: file: \WebSites\WebBusinessSuite\Scripts\Main\BusinessSuit.css

 695 total views

Author: Albert

Leave a Reply