JQuery DataTable Plugin Width issues

Question

I am using jQuery datatable plugin. I am rendering my html table first and then applying the plugin. It has some issues.

Issues:

Header column and body columns are not aligned.
If there are a lot of columns (columns are generated dynamically not possible to set a fix width of columns) the data table grows horizontally.

Sample Code :

var scrollY = $(window).height() * 80 / 100;   
var oTable = $('#myTable').dataTable({
    "sScrollX": "100%",
    "sScrollY": scrollY,
    "bScrollCollapse": true,
    "bPaginate": false,
    "bStateSave": false,
    "bFilter": false,
    "bInfo": false,
    "bAutoWidth": false,
    "bSort": true,
    "aaSorting": []       
});

oTable.fnAdjustColumnSizing();

This is how my table is looking enter image description here

As you can see header and body are not aligned, table is expanding to the right of screen.
Any help is appreciated.

EDIT I am using this plugin inside JQuery tabs.

datatable uses same table for header and body, hence this should not happend. Are you using <head></head> and <body></body> tags in your table? can you share the html code also. — Bhushan Kawadkar
Yes I am using <thead> and <body> tags. Actually this html is generated in js code so can not share easily. — V.B

Fsee Fsee · Accepted Answer · 2014-07-31T10:26:01

First I would control the html structure before creating the datatable. It has to be like the following:

<table id="myTable">
<thead>
<tr>
    <th></th>
    <th></th>
    // exact number of th present in the datatable
</tr>
</thead>
<tbody>
</tbody>
</table>

then i would try to set:

"bAutoWidth": true

even if it's difficult to solve your problem without HTML code...

JQuery DataTable Plugin Width issues

1 Answers