CSS issue with datatable having 30 columns header

sagar25_25

My datatable is having 30 columns. i have put below code in my jquery for horizontal scroller. I expected table to fit my screen but still my table is stretching a lot on the page and i can see browser scroller also . How to compress it.

"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"aoColumns": [
{ "sName": "id",
"bSearchable": false,
"bSortable": false,
"bVisible": false,
"sWidth":"3%"
},
{ "sName": "1", "bSortable": false, "sWidth":"3%" },
{ "sName": "2", "bSortable": false, "sWidth":"3%"},
{ "sName": "3", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false,"sWidth":"3%"},
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%"},
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%" },
{ "sName": "", "bSortable": false, "sWidth":"3%"},
{ "sName": "", "bSortable": false, "sWidth":"4%" },
{ "sName": "", "bSortable": false, "sWidth":"4%" },
{ "sName": "", "bSortable": false, "sWidth":"4%" },
{ "sName": "", "bSortable": false, "sWidth":"4%" },
{ "sName": "", "bSortable": false, "sWidth":"4%" },
{ "sName": "", "bSortable": false, "sWidth":"4%"},
{ "sName": "", "bSortable": false, "sWidth":"4%" },
{ "sName": "", "bSortable": false, "sWidth":"4%" },
{ "sName": "29", "bSortable": false, "sWidth":"4%" },
{ "sName": "30", "bSortable": false, "sWidth":"4%" }
]

Html:






1
2
....
30