datatable jquery - table header width not aligned with body width
JqueryDatatablesAlignmentJquery Problem Overview
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.
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": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
"bSortable": false
},
null,
null,
null,
null
]
});
rates
is my table id.
Could anyone help me with this? Thanks in advance.
Jquery Solutions
Solution 1 - Jquery
###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 tocolumns().adjust()
API method. See Responsive extension – Incorrect breakpoints example. -
If you're using Scroller extension, you need to call
scroller.measure()
API method instead ofcolumns().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 tocolumns().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.
Solution 2 - Jquery
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('<div class="dataTables_scroll" />');
Don't use sScrollX
or sScrollY
, remove them and add a div
wrapper yourself which does the same thing.
Solution 3 - Jquery
Found the solution :
Added table-layout:fixed
to the table. And opened the application in IE mode.
Solution 4 - Jquery
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()
Solution 5 - Jquery
Use these commands
$('#rates').DataTable({
"scrollX": true,
"sScrollXInner": "100%",
});
Solution 6 - Jquery
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);
Solution 7 - Jquery
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);
Solution 8 - Jquery
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();
Solution 9 - Jquery
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 "scrollX" parameter created this issue in some of the pages which are having more columns.
Below code wrap a div around the DataTable with style "overflow as auto". We need to add div when dataTable completed the execution. We can do this as below:
$('#DataTableID').DataTable({
//"scrollX": true,
"initComplete": function (settings, json) {
$("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});
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
Solution 10 - Jquery
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!
Solution 11 - Jquery
make sure table width is 100%
Then "autoWidth":true
Solution 12 - Jquery
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
"bSortable": false
},
null,
null,
null,
null
]}).fnAdjustColumnSizing( false );
Try calling the fnAdjustColumSizing(false) to the end of your datatables call. modified code above.
Solution 13 - Jquery
After a ton of hours, I just removed scrollY
from options
and it's working fine
Solution 14 - Jquery
This code will align the header with the body.
data-table-basic
is the id of the data table I gave.
<style>
#data-table-basic_wrapper .dataTable, #data-table-basic_wrapper .dataTables_scrollHeadInner {
width: 100% !important;
}
</style>
Solution 15 - Jquery
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 = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></table>').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("<div style='position:relative;overflow:auto;height:400px;'/>"); //correzione per il disallineamento dello header
Solution 16 - Jquery
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.
Solution 17 - Jquery
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);
Solution 18 - Jquery
See this solution. It can be solved with a window scroll event firing one time only.
Solution 19 - Jquery
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
});
Solution 20 - Jquery
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 > scrollBodyHeight) {
$('#' + this.options.id).closest('.dataTables_scrollBody').css({
width: "calc(100% + 15px)",
})
} else {
$('#' + this.options.id).closest('.dataTables_scrollBody').css({
width: "100%",
})
}
Solution 21 - Jquery
$('.DataTables_sort_wrapper').trigger("click");
Solution 22 - Jquery
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;
}
Solution 23 - Jquery
My solution was add this: ...
initComplete () {
this.api (). columns (). header (). each ((el, i) => {
$ (el) .attr ('style', 'min-width: 160px;')
});
},
...
and it look fine.
Solution 24 - Jquery
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);
} );
Solution 25 - Jquery
Add fixed width for container table
JS:
otableCorreo = $("#indexTablaEnvios").DataTable({
"fnInitComplete": function (oSettings, json) {
$(otableCorreo.table().container()).addClass("tablaChildren");
},
});
CSS:
.tablaChildren {
width: 97%;
}
Solution 26 - Jquery
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();
Solution 27 - Jquery
Use this: Replace your modal name, clear your datatable and load
$('#modalCandidateAssessmentDetail').on('shown.bs.modal', function (e) {
});
Solution 28 - Jquery
add to your script in page :
$( window ).resize(function() {
var table = $('#tableId').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();
});
Solution 29 - Jquery
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.
Solution 30 - Jquery
I did have this problem for a while and I realised that my table was drawn before it was shown.
<div class="row">
<div class="col-md-12" id="divResults">
</div>
</div>
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!!!
});
});
}
Solution 31 - Jquery
I realize there a numerous answers already but I did not see one using the library's title option itself. You can define the data for each column and then define a title property, which will correctly render the headers. In this case, all you need is a table HTML declaration with nothing inside (no th element). There is no need for any additional CSS or JS.
itemsTable = $('#itemsTable').DataTable({
"ajax": {
"url": "/getItemData",
"dataSrc": ""
},
"columns": [
{data: "itemNumber", title: "Item #" },
{data: "author", title: "Author" },
{data: "title", title: "Title" },
{data: "genre", title: "Genre" },
{data: "publisher", title: "Publisher" }
]
});
Solution 32 - Jquery
from this answer
var table = $('#example').DataTable();
table.columns.adjust().draw();
to
setTimeout(function () {
var table = $('#example').DataTable();
table.columns.adjust().draw();
}, 3000);
to work!!!!
Solution 33 - Jquery
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.
Solution 34 - Jquery
If your table or div containing the table is hidden initially , first make that div visible and then draw the table