Заголовок с данными не выравнивается после columns.adjust (). Draw ()

Question

У меня есть три столбца html таблицы. с style="width: 100%;". Мой Datatable не хочет выравнивать при использовании scrollX. Я рисую свои таблицы с помощью table.columns.adjust().draw(), но столбцы не выровняются полностью, если я не нажму на заголовок. Это происходит только для небольших столов. Любое предложение? Вот моя часть декларируемой информации.

var carsTable = $('#carstable').DataTable({
      autoWidth: true,
      data: null,
      fixedHeader: true,
      lengthChange: true,
      ordering: true,
      order: [
        [1, "desc"]
      ],
      columns: [{
          data: "licence"
        },
        {
          data: "capacity"
        }, {
          data: "id"
        }, {
          data: "daterequested"
        }, {
          data: "time"
        }
      ],

      columnDefs: [{
        targets: 2,
        render: function (data, type, row, meta) {
          if (data != 'none') {
            return `<span class="label label-primary">${data}</span>`;
          } else {
            return `<span class="label label-danger">${data}</span>`;
          }
        }
      }, {
        targets: 3,
        render: function (data, type, row, meta) {
          if (data != 'none') {
            return `<span class="label label-info">${data}</span>`;
          } else {
            return `<span class="label label-danger">${data}</span>`;
          }
        }
      }, {
        targets: 4,
        render: function (data, type, row, meta) {
          if (data != 'none') {
            return `<span class="label label-default">${data}</span>`;
          } else {
            return `<span class="label label-danger">${data}</span>`;
          }
        }
      }]
    });