How to resize a JQuery/Datatable after hiding columns

The solution was actually simpler than I thought. Using the "inspect element" feature in google chrome I found that, when calling "datatable()" datatables's method, datatables API used a fixed width based on the space needed to display the amount of columns. It was something like 1947 pixels or so. Therefore, you cannot change this using simple css because the fixed width used by datatables had higher priority. The solution I found was using "width" jquery's method after hiding the columns:

$("#reportTable").width("100%");

since it changes the width attribute directly in the table element.


It is work for me as has been mentioned by OlivierH:

$('#your_datatable_selector').width('auto');