Horizontal scrollbar not showing in jquery datatable

I am using jquery datatable to add horizontal and vertical scrollbar to html table. Everything else works fine, except that the horizontal scrollbar does not appear and the horizontal content exits the screen. I am using the following code:

jQuery(document).ready(function(){
    var oTable = jQuery('#example').dataTable( {
    "bPaginate": false,
    "bFilter": false,
    "bInfo": false,
    'bSortable': false,
    "aaSorting": [],
    "bAutoWidth": false,
    "sScrollY": "300",
    "sScrollX": "50%",
    "sScrollXInner": "100%",
    "bScrollCollapse": true
    });
    new FixedColumns( oTable );
});

Changing sScrollX does not change anything. Changing sScrollXInner distorts the table.

Below is the html code for the table, which is in the div:

<div id="demo">
   <table id="example" class="display" border="0" width="500px" cellspacing="0"
   cellpadding="10" align="center" style="border: solid 1px #dedfe1;">

My requirement is to have a fixed table header and a fixed left column. This is why I use jquery datatable. The table title is fixed, and vertical scrolling works fine. Horizontal scrolling does not appear.

Can anyone help?

Thanx