DataTables.js - Table not loading initial 100% full width on page load

for Bootstrap 4 Users

If you are using Bootstrap classes to the table, you might ran into this width issue. To fix this, use the datatable default option "autoWidth": false

Enable or disable automatic column width calculation. This can be disabled as an optimisation (it takes a finite amount of time to calculate the widths) if the tables widths are passed in using

$('#example').dataTable( {
    "autoWidth": false
});

https://datatables.net/reference/option/autoWidth


I believe I have resolved the issue. I was using an older build.

After upgrading to 10.1 and following the table width instruction below, I resolved my issue.

I added (width="100%") to my table tag and it now stays at 100%

So instead of

<table id="summary_table" class="display nowrap" style="width: 1000" border=1>

I replaced the style width: 1000 which just sets the absolute width to 1000 pixels (I forgot to add the px unit suffix), to a percentage value of 100% `width='100%' and the resolving table tag would read.

<table id="summary_table" class="display nowrap" width="100%" border=1>

I used the answer from this question to form my response

https://stackoverflow.com/a/23842795/1691103

Example

http://www.datatables.net/examples/basic_init/flexible_width.html