Datatable fixed column width

Question

Hi I am using the datatable to display some data in our website but some reason I am not able to fix the column width to a fixed size, its calculating column width automatically. I have tried specifying the {"sWidth": "30px;"} for the columns but no luck. Here I am giving my code which renders the table

    jQuery('#dynamic')
        .html('<table cellpadding="1" cellspacing="1" border="0" class="properties" id="settingsGrid"></table>');

    jQuery('#settingsGrid').dataTable({
//      "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aaData":  aDataSet,
        "aoColumns": [
          {"sTitle":"catId", "bVisible": false},
          {"sTitle" : "Name","sWidth": "30px;"},
          {"sTitle" : "Email","sWidth": "30px;"},
          {"sTitle" : "Phone no","sWidth": "30px;"},
          {"sTitle" : "Location","sWidth": "30px;"},
          {"sTitle" : "No of Properties","sWidth": "30px;"},
          {"sTitle" : "Web Site URL","sWidth": "30px;"},
          {"sTitle" : "Created Date","sWidth": "30px;"}
          ],
          "aoColumnDefs": [ {
              "aTargets": [ 0 ],
              "mRender": function ( data, type, row ) {
                    return data +' '+ row[3];
              }
          }
          ],
          "bAutoWidth": false,
          "bDeferRender": true,
          "sScrollY": "350",
          "bScrollCollapse": true,
          "bFilter" : false,
          "bSort" : false,
          "bInfo" : false,
          "bLengthChange": false,
          "iDisplayLength": 10,
          "oLanguage": {
            "sEmptyTable": "No categories available in your name"
          },
          "oLanguage": {
              "sInfoEmpty": "No entries to show"
          },
    });

Can anyone guide me where I am going wrong?

Here is a output what I am getting, basically I need to shrink the website column.

Answer 1

Try this piece of code in css:

 #settingsGrid td {
     width: 30px !important;
   }