Why do not you adjust the size of the column to how do I define datatables bootstrap 4

I'm using the Laravel DataTables package from the backed up with Laravel, and from the frontEnd DaTaTableJs, what I'm trying to do is set the width of the columns using classes defined in my css, but apparently it does not take them, just hide the column if I add the class d-none, plus does not give the corresponding width according to my class w-3 w-10 etc

Js

$('#usuarios-table').DataTable( {
    processing: true,
    serverSide: true,
    ajax: "/api/users/",//API RETURN DATA
    columns : [
        { data : 'id' , id: 'id',className :'w-5'},
        { data : 'roles' , name:'roles',className  : 'w-8'},
        { data : 'tipo_doc' , name:'tipo_doc',className  : 'w-10'},
        { data : 'num_doc' , id: 'num_doc',className  : 'w-10'},
        { data : 'name' , id: 'name',className  : 'w-15'},
        { data : 'email' , name: 'email',className : "w-10"},
        { data : 'phone' , name: 'phone',className : "d-none"},
        { data : 'username' , name: 'username',className : "w-10"},
        { data : 'updated_at' , name: 'updated_at',className  : 'd-none'},
        { data : 'personate' , name: 'personate',orderable:false, searchable:false,className  : 'w-5'},
        { data : 'actions' , name: 'actions',orderable:false, searchable:false,className  : 'w-20'},
    ],
    "order": [[ 9, "desc" ]]
}); 

View Blade

<table id="usuarios-table" class="table table-responsive table-striped table-no-bordered table-hover" cellspacing="0" style="width:100% !important">
 <thead >
     <tr>
        <th class="w-5">Id</th>   
        <th class="w-8">Roles</th>       
        <th class="w-10">Document</th>
        <th class="w-10">N° Documento</th>
        <th class="w-15 ">Name</th>
        <th class="w-10">Email</th>
        <th  class="d-none">Phone</th>
        <th class="w-10">User</th>
        <th class="d-none"></th>
        <td class="disabled-sorting"></td>
        <td class="disabled-sorting w-20"></td>
    </tr>
</thead>
<tbody></tbody> 
</table>

Picture final

I have all my classes in my styles

.w-8{
    width: 8% !important;
}
.w-10{
    width: 10% !important;
}

....

I tried to modify the

td, th {
     white-space: nowrap; //change to initial 
}

but I could not set the witdh for the columns

via Chebli Mohamed