Columns misaligned when width is not 100%

NoBullMan

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
When I set the width of table to 100%, all is well. When I change it to, say, 75% because there are only two or three columns and I don;t need the whole width of the screen, headers and data rows are misaligned.

I tried using tblCountryCodes.column.adjust().responsive.recalc() but didn't make a difference.

<div> <table id="countryCodesTable" class="table table-striped table-bordered table-hover display responsive compact" **style="width:75%;"**> <thead> <tr class="info"> <th>Country Code</th> <th>Country Name</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <script> function populateTable() { $.ajax({ type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", url: "Path to WebService API", cache: false, data: null, }).done(function (result) { tblCountryCodes.clear().draw(); if (!result || result.d === "") { } else { jResult = JSON.parse(result.d); tblCountryCodes.rows.add(jResult).draw(); tblCountryCodes.columns.adjust().responsive.recalc(); } }).fail(function (jqXHR, textStatus, errorThrown) { //alert(textStatus + ' - ' + errorThrown + '\n' + jqXHR.responseText); }); } var tblCountryCodes = $("#countryCodesTable").DataTable({ ... order: [0, 'asc'], autoWidth: true, paging: false, columns: [ { data: "COUNTRY_CODE" }, { data: "COUNTRY_NAME" } ], pageLength: -1, deferRender: true, }); </script> 

NoBullMan

Never mind. Seems I had to set the width of the container div to 75% rather than the table itself.

<div style="width:75%"> <table id="countryCodesTable" class="table table-striped table-bordered table-hover display responsive compact"> <thead> <tr class="info"> <th>Country Code</th> <th>Country Name</th> </tr> </thead> <tbody> </tbody> </table> </div> 

allan

Spot on. Thanks for the update post

Allan