how to set datatable responsive using server side processing in codeigniter?

ihsandn

i have a problem when i change into phone screen size the column not hide and i think im doing something wrong here when using datatable responsive. anyone can help? i will show some script i used. sorry bad english. you can see my problem in photo i upload.

this is html script for table

    <table id="table" class="table table-striped table-bordered display responsive nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th><font size="3">Problem</th>
                <th><font size="3">Problem Description</th>
                <th><font size="3">MSAO</th>
                <th><font size="3">Score Reduce</th>
                <th><font size="3">Remark</th>
                <th><font size="3">CAT</th>
                <th><font size="3">Registration</th>
                <th><font size="3">Date</th>
                <th style="width:125px;"><font size="3">Action</font></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

and this is ajax,js script to get data

var table;
$(document).ready(function() {
//datatables
table = $('#table').DataTable({

    "processing": true, //Feature control the processing indicator.
    "serverSide": true, //Feature control DataTables' server-side processing mode.
    "order": [], //Initial no order.

    // Load data for the table's content from an Ajax source
    "ajax": {
        "url": "<?php echo site_url('atype/ajax_list')?>",
        "type": "POST"
    },

    //Set column definition initialisation properties.
    "columnDefs": [
    { 
        "targets": [ -1 ], //last column
        "orderable": false, //set not orderable
    },
    ],

});

if someone understand what i mean please help. thanks