Ошибка в jQuery Datatables в ширине столбца

Question

Я работаю над проектом, где у меня возникают проблемы с шириной столбца jQuery Datatable.

Когда я удаляюВ первой строке заголовка таблица отображается так, как должна.Но с дополнительной строкой заголовка ширина столбцов таблицы испортилась.

Почему это происходит?И конечно самое важное;Как я могу решить это?

Инициализация:

datatable = $('.datatable').DataTable({
    "stateSave": true,
    "scrollX": true,
    "autoWidth": true,
    "order": [],
    "buttons": [
        {extend: 'excel', text: '<i class="fa fa-table fa-fw" aria-hidden="true"></i>'},
        {extend: 'colvis', text: '<i class="fa fa-columns fa-fw" aria-hidden="true"></i>'},
        {text: '<i class="fa fa-refresh fa-fw" aria-hidden="true"></i>', className: 'buttons-refresh', action: function ( e, dt, node, config ) {
            dt.order([]).draw();
            window.location.reload();
        }}
    ],
    "dom": '<lfB<t>pi>',
});

HTML:

<div class="box-body">
    <table class="datatable table table-hover table-striped table-bordered">
        <thead>
            <tr>
                <th colspan="6" style="border-bottom: 0px;"></th>
                @foreach (getMonths() as $month)
                    <th colspan="2" style="border-bottom: 0px; text-align: center;">{{ $month }} {{ year() }}</th>
                @endforeach
            </tr>
            <tr>
                <th>#</th>
                <th>Werknaam</th>
                <th>Opdrachtgever</th>
                <th>Aanneemsom</th>
                <th>MMW</th>
                <th>Totaal</th>
                @foreach (getMonths() as $month)
                    <th>Prognose</th>
                    <th>Werkelijk</th>
                @endforeach
            </tr>
        </thead>
        <tbody>
            @foreach ($projects as $project)
                <tr>
                    <td>{{ $project->number }}</td>
                    <td>{{ $project->name }}</td>
                    <td>{{ $project->client->name ?? '- geen relatie -' }}</td>
                    <td style="text-align: right;">{!! format_currency($project->contract_sum, '') !!}</td>
                    <td style="text-align: right;">{!! format_currency($project->contract_variations, '') !!}</td>
                    <td style="text-align: right;">{!! format_currency($project->total, '') !!}</td>
                    @foreach (getMonths() as $m => $month)
                        <td style="text-align: right;" class="text-primary">
                            {!! format_currency($project->amounts->where('year', year())->where('month', $m)->sum('prognosis_amount'), '') !!}
                        </td>
                        <td style="text-align: right;" class="text-success">
                            {!! format_currency($project->amounts->where('year', year())->where('month', $m)->sum('actual_amount'), '') !!}
                        </td>
                    @endforeach
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

CSS:

table.datatable {
    table-layout: fixed;
}
.datatable th, .datatable td { 
    white-space: nowrap; 
}
.table > tbody > tr > td,
.table > thead > tr > th {
    padding: 8px 13px;
    min-width: 100px;
}