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>