datatable jquery - table header width not aligned with body width

Question

I am using jQuery datatables  When running the application  the header width is not aligned with the body width  But when I click on the header  it is getting aligned with the body width but even then there is some light misalignment  This problem occurs only in IE   JSFiddle  This is how it looks when the page gets loaded     After clicking on the header     My datatable code       rates   dataTable        bPaginate   false       sScrollY    250px        bAutoWidth   false       bScrollCollapse   true       bLengthChange   false       bFilter   false       sDom     lt  top  gt rt lt  bottom flp gt  lt  clear  gt         aoColumns                   bSortable   false                    null          null          null          null             rates is my table id  Could anyone help me with this  Thanks in advance

User · Answer

I solved this problem by wrapping the  dataTable  Table with a div with overflow auto    dataTables scroll       overflow auto      and adding this JS after your dataTable initialization   jQuery   dataTable   wrap   lt div class  dataTables scroll    gt       Don t use sScrollX or sScrollY  remove them and add a div wrapper yourself which does the same thing

User · Answer

I had a similar issue  I would create tables in expandable collapsible panels  As long as the tables were visible  no problem  But if you collapsed a panel  resized the browser  and then expanded  the problem was there  I fixed it by placing the following in the click function for the panel header  whenever this function expanded the panel                  recalculate column widths  because they aren t recalculated when the table is hidden                  homeTable   DataTable                    columns adjust                    responsive recalc

User · Answer

From linking the answer from Mike Ramsey I eventually found that the table was being initialized before the DOM had loaded   To fix this I put the initialization function in the following location   document addEventListener  DOMContentLoaded   function         InitTables       false

User · Answer

add to your script in page       window   resize function         var table       tableId   DataTable            container   css   display    block         table columns adjust   draw

User · Answer

CAUSE  Most likely your table is hidden initially which prevents jQuery DataTables from calculating column widths   SOLUTION   If table is in the collapsible element  you need to adjust headers when collapsible element becomes visible   For example  for Bootstrap Collapse plugin       myCollapsible   on  shown bs collapse   function             fn dataTable tables true   DataTable          columns adjust         If table is in the tab  you need to adjust headers when tab becomes visible   For example  for Bootstrap Tab plugin      a data-toggle  tab     on  shown bs tab   function e          fn dataTable tables true   DataTable          columns adjust           Code above adjusts column widths for all tables on the page  See columns   adjust   API methods for more information   RESPONSIVE  SCROLLER OR FIXEDCOLUMNS EXTENSIONS  If you re using Responsive  Scroller or FixedColumns extensions  you need to use additional API methods to solve this problem    If you re using Responsive extension  you need to call responsive recalc   API method in addition to columns   adjust   API method  See Responsive extension     Incorrect breakpoints example  If you re using Scroller extension  you need to call scroller measure   API method instead of columns   adjust   API method  See Scroller extension     Incorrect column widths or missing data example  If you re using FixedColumns extension  you need to call fixedColumns   relayout   API method in addition to columns   adjust   API method  See FixedColumns extension     Incorrect column widths example    LINKS  See jQuery DataTables     Column width issues with Bootstrap tabs for solutions to the most common problems with columns in jQuery DataTables when table is initially hidden

User · Answer

I was facing the same issue  I added the scrollX  true property for the dataTable and it worked  There is no need to change the CSS for datatable  jQuery   myTable   DataTable                                fixedHeader  true                               scrollY   450px                                scrollX  true                               paging     false                               ordering   false                               info       false                               searching   false                               scrollCollapse   true

User · Answer

Some simple css on the headers should do this for you    rates info   rates paginate       float  left      width  100       text-align  center      Can t promise this will work just as is because I haven t seen your html but try it and if it doesn t then you can post your html and I ll update it

User · Answer

Found the solution    Added table-layout fixed to the table  And opened the application in IE mode

User · Answer

Use this  Replace your modal name  clear your datatable and load      modalCandidateAssessmentDetail   on  shown bs modal   function  e

User · Answer

I was using Bootstrap 4  and had added the class table-sm to my table   That messed up the formatting   Removing that class fixed the problem     If you can t remove that class  I would suspect that adding it via javascript to the headers table would work   Datatables uses two tables to display a table when scrollX is enabled -- one for the header  and one for the body

User · Answer

do not need to come up with various crutches  table header width not aligned with body   because  due to the fact that the table did not have enough time to fill in the data for this  do setTimeout     setTimeout function            your datatable code       1000

User · Answer

I did have this problem for a while and I realised that my table was drawn before it was shown   lt div class  quot row quot  gt       lt div class  quot col-md-12 quot  id  quot divResults quot  gt       lt  div gt   lt  div gt           function ShowResults data         div fadeOut  fast   function               div html data              I used to call DataTable   here  there may be multiple tables in data             each header s width was 0 and missaligned with the columns            the width woulld resize when I sorted a column or resized the window              div find  table   DataTable options            div fadeIn  fast   function                  Loading false                div find  table   DataTable options      moved the call here and everything is now dandy

User · Answer

Gyrocode com answer to problem was totally correct but his solution will not work in all cases  A more general approach is to add the following outside your document ready function     document  on   init dt   function   e  settings         var api   new   fn dataTable Api  settings        window setTimeout function                  api table   columns adjust   draw              1

User · Answer

issue is data table is called before the data table is drawn on DOM use set time out before calling data table   setTimeout function         var table       exampleSummary   removeAttr  width   DataTable            scrollY          300px           scrollX         true          scrollCollapse  true          paging          true          columnDefs                  width  200  targets  0                      fixedColumns  false             100

User · Answer

After a ton of hours  I just removed scrollY from options and it s working fine

User · Answer

My solution was add this       initComplete                 this api     columns     header     each   el  i    gt                          el   attr   style    min-width  160px                             and it look fine

User · Answer

Unfortunately  none of those solutions worked for me  Perhaps  due to the difference in the initialization of our tables  we have different results  It might be possible  that one of those solutions would work for someone  Anyways  wanted to share my solution  just in case someone is still troubled with this issue  It is a bit hackish  though  but it works for me  since I don t change the width of the table later   After I load the page and click on the header  so that it expands and shows normally  I inspect the table header and record the width of the  dataTables scrollHeadInner div  In my case it is 715px  for example  Then add that width to css    dataTables scrollHeadInner     width  715px  important

User · Answer

I fixed  Work for me   var table       example   DataTable        container   css   display    block     table columns adjust   draw      Or  var table       example   DataTable    table columns adjust   draw      Reference  https   datatables net reference api columns adjust

User · Answer

Simply wrap table tag element in a div with overflow auto and position relative  It will work in chrome and IE8  I ve added height 400px in order to keep table size fixed even after reloading data   table       lt table cellpadding  0  cellspacing  0  border  0  class  display  id  datat  gt  lt  table gt    appendTo   candidati   dataTable              sScrollY    400px    NO MORE REQUIRED - SEE wrap BELOW            sScrollX    100     NO MORE REQUIRED - SEE wrap BELOW            bScrollCollapse   true   NO MORE REQUIRED - SEE wrap BELOW            bScrollAutoCss   true   NO MORE REQUIRED - SEE wrap BELOW          sAjaxSource    datass php            aoColumns   colf           bJQueryUI   true           sPaginationType    two button            bProcessing   true           bJQueryUI  true           bPaginate   true           table-layout    fixed            fnServerData   function sSource  aoData  fnCallback  oSettings                aoData push   name    filters    value     toJSON getSearchFilters        inserisce i filtri             oSettings jqXHR     ajax                    dataType    JSON                    type    POST                    url   sSource                   data   aoData                   success   fnCallback                                     fnRowCallback   function nRow  aData  iDisplayIndex                  nRow  click function                         row selected   removeClass  row selected                      this  addClass  row selected                      mostra il detaglio                 showDetail aData CandidateID                                       fnDrawCallback   function oSettings                         aaSorting     1   asc       wrap   lt div style  position relative overflow auto height 400px    gt       correzione per il disallineamento dello header

User · Answer

DataTables sort wrapper   trigger  click

User · Answer

As Gyrocode com said  Most likely your table is hidden initially which prevents jQuery DataTables from calculating column widths    I had this problem too and solved it by just init the dataTable after showing the div  For example      my div   show        my table   DataTable

User · Answer

I know this is old  but I just ran into the problem and didn t find a great solution  So  I decided on using some js to get the scrollBody s height  as compared to the tables height  If the scrollBody is smaller than the table  then I increase the tables width by 15px to account for the scrollbar  I set this up on resize event too  so that it works when my container changes sizes   const tableHeight           this options id  height    const scrollBodyHeight           this options id  closest   dataTables scrollBody   height     if  tableHeight  gt  scrollBodyHeight                this options id  closest   dataTables scrollBody   css           width   calc 100    15px             else               this options id  closest   dataTables scrollBody   css           width   100

User · Answer

rates   dataTable    bPaginate   false   sScrollY    250px    bAutoWidth   false   bScrollCollapse   true   bLengthChange   false   bFilter   false   sDom     lt  top  gt rt lt  bottom flp gt  lt  clear  gt     aoColumns               bSortable   false            null      null      null      null     fnAdjustColumnSizing  false      Try calling the fnAdjustColumSizing false  to the end of your datatables call  modified code above    Discussion on Column sizing issue

User · Answer

make sure table width is 100     Then  autoWidth  true

User · Answer

Use these commands      rates   DataTable            scrollX   true           sScrollXInner    100

User · Answer

See this solution  It can be solved with a window scroll event firing one time only

User · Answer

None of the above solutions worked for me but I eventually found a solution that did   My version of this issue was caused by a third-party CSS file that set the  box-sizing  to a different value  I was able to fix the issue without effecting other elements with the code below        table closest   dataTables wrapper   find      css  box-sizing   content-box   css  -moz-box-sizing   content-box      Hope this helps someone

User · Answer

None of the above solutions worked for me  so I ll post my solution  I was loading the table into a hidden div and then showing the div after the table was built  When I showed unhid the div first and then built the table while the table was visible  it worked    So DataTables can t size columns in a hidden div  likely because it is getting a column width of 0px on the backend when the table is hidden

User · Answer

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  In my case I wanted to have horizontal scroll bar because content are scrolling to right  So adding  quot scrollX quot  parameter created this issue in some of the pages which are having more columns  Below code wrap a div around the DataTable with style  quot overflow as auto quot   We need to add div when dataTable completed the execution  We can do this as below      DataTableID   DataTable        quot scrollX quot   true                 quot initComplete quot   function  settings  json             quot  DataTableID quot   wrap  quot  lt div style  overflow auto  width 100  position relative   gt  lt  div gt  quot                          If you are using the scrollX scrollY  scrollXInner or sScrollXInner options - remove them  They may cause problems  Source  http   sforsuresh in datatables-header-body-not-aligned

User · Answer

Add fixed width for container table  JS   otableCorreo       indexTablaEnvios   DataTable                        fnInitComplete   function  oSettings  json              otableCorreo table   container    addClass  tablaChildren                 CSS    tablaChildren       width  97

[jquery] datatable jquery - table header width not aligned with body width

Examples related to jquery

Examples related to datatables

Examples related to alignment