columnDefs width Not Working

Ninja Joe

I have a three-column table on which I'm trying to change the second column's width to 400 pixels. However, my columnDefs is having no effect. I'm wondering why it isn't working? Could it be because I'm loading JSON data or another reason?

Here's my DataTable() call:

$( '#ajax-datatable').DataTable( { ajax:{ url: 'https://example.com/json', dataSrc:'' }, "columns": [ { "data": "id" }, { "data": "status" }, { "data": "permit" } ], scrollX: true, pageLength: 10, pagingType: 'full_numbers',
    columnDefs: [
        { targets: [ 1 ], width: '400px' }, // <-- Not working.
        { targets: '_all', className: 'dt-center' } // <-- Working.
    ],

    drawCallback: function() {
        $( '.dataTables_paginate > .pagination' ).addClass( 'pagination-rounded' );
    }
} );

The curious thing is, { targets: '_all', className: 'dt-center' } DOES work.
I tried doing { targets: '_all', width: '400px' } but it also didn't work.

Ninja Joe

Found the answer: I needed to remove the "w-100" Bootstrap class from the table element.