Help needed - Cannot set datatables width

fabioi

Hello,

I am using datatables in a Laravel app using https://github.com/yajra/laravel-datatables-oracle.
The issue is that I cannot resize the columns. Some columns are quite wide while the last four are narrow.

this is the code I am using

css imports

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.css"/>

js imports

the html

 <table id="users" class="table table-hover table-condensed">
            <thead>
            <tr>
                <th class="col-md-3">{{{ trans('users.id') }}}</th>
                <th class="col-md-3">{{{ trans('users.first_name') }}}</th>
                <th class="col-md-3">{{{ trans('users.last_name') }}}</th>
                <th class="col-md-3">{{{ trans('users.email') }}}</th>
                <th class="col-md-3">{{{ trans('users.confirmed') }}}</th>
                <th class="col-md-3">{{{ trans('users.suspended') }}}</th>
                <th class="col-md-3">{{{ trans('users.roles') }}}</th>
                <th class="col-md-3">{{{ trans('users.created_at') }}}</th>
                <th class="col-md-3">{{{ trans('formFields.actions') }}}</th>

            </tr>
            </thead>
            <tbody>
            <tr>
                <th class="col-md-3">{{{ trans('users.id') }}}</th>
                <th class="col-md-3">{{{ trans('users.first_name') }}}</th>
                <th class="col-md-3">{{{ trans('users.last_name') }}}</th>
                <th class="col-md-3">{{{ trans('users.email') }}}</th>
                <th class="col-md-3">{{{ trans('users.confirmed') }}}</th>
                <th class="col-md-3">{{{ trans('users.suspended') }}}</th>
                <th class="col-md-3">{{{ trans('users.roles') }}}</th>
                <th class="col-md-3">{{{ trans('users.created_at') }}}</th>
                <th class="col-md-3">{{{ trans('formFields.actions') }}}</th>

            </tr>
            </tbody>

            <tfoot>
            <tr>
                <th class="col-md-3">{{{ trans('users.id') }}}</th>
                <th class="col-md-3">{{{ trans('users.first_name') }}}</th>
                <th class="col-md-3">{{{ trans('users.last_name') }}}</th>
                <th class="col-md-3">{{{ trans('users.email') }}}</th>
                <th class="col-md-3">{{{ trans('users.confirmed') }}}</th>
                <th class="col-md-3">{{{ trans('users.suspended') }}}</th>
                <th class="col-md-3">{{{ trans('users.roles') }}}</th>
                <th class="col-md-3">{{{ trans('users.created_at') }}}</th>
                <th class="col-md-3">{{{ trans('formFields.actions') }}}</th>

            </tr>
            </tfoot>
        </table>

the datatable initialization

oTable = $('#users').DataTable({

            initComplete: function () {

            tableTools: {
                "sSwfPath": "/custom/datatables_table_tools2_2_4/swf/copy_csv_xls_pdf.swf",
                "sRowSelect": "multi",
                "aButtons": [ 'copy' ]
            },
            "processing" :  true,
            "dom": '<"toolbar"fT>rtip', 
            "autoWidth": false,
            "ajax": "api",

            "language"  :
            {
                "url":
                baseDataTablesLangCDNPath + langFile
            },
            "columns":
                    [
                        {data: 'id',  name: 'users.id', "visible": false ,"width": "5%" },
                        {data: 'name',  name: 'user_profiles.name',"width": "5%" },
                        {data: 'surname', name: 'surname' ,"width": "5%" },
                        {data: 'email', name: 'email' ,"width": "5%" },
                        {data: 'confirmed', name: 'confirmed'  ,"width": "5%"},
                        {data: 'suspended', name: 'suspended' ,"width": "5%" },
                        {data: 'rolenames', name: 'roles.name' , "width": "5%" },
                        {data: 'created_at', name: 'users.created_at', "width": "5%"  },
                        {data: 'actions', "searchable":false, "orderable": false, name: 'actions' , "width": "20%"},
                    ]
        });

Any idea how to solve the problem?