Vertical Scroll settings effecting horizontal scrolling with Datatables

Question

I am trying to create a datatable that has vertical but not horizontal scrolling. The create table statement I am using here as follows:

$(document).ready( function () {
    $('#order-attention-table').DataTable( {
        "bFilter": false,
        "scrollY": 300,
        "scrollX": false,
        "paging":   false,
        "ordering": false,
        "info":     false,
    });
} );

Currently my columns are wider than the screen and this causes a horizontal scroll bar to appear even with "scrollX": false. The only way I can get the horizontal scrollbar to not appear is by removing the "scrollY": 300. When I remove the verticle scrolling property the horizontal scroll bar goes away.

So my question is two parts.

1. How to I force the columns to fit the screen?
2. How to I stop the horizontal scroll bar while still allowing vertical scrolling?

Solution

SOLUTION #1

You can use Responsive extension if data in your columns don't fit into the page/container.

var table = $('#example').DataTable({
   "searching": false,
   "scrollY": 300,
   "paging":   false,
   "ordering": false,
   "info":     false,        
   "responsive": true
});

DEMO

See this jsFiddle for code and demonstration.

SOLUTION #2

You can disable automatic width calculation autoWidth:false and set minimal width with columnDefs.width as shown below.

var table = $('#example').DataTable({
   "searching": false,
   "paging":   false,
   "ordering": false,
   "info":     false,
   "autoWidth": false,
   "columnDefs": [
       { "targets": "_all", "width": "1%" }
   ]        
});

Also you can add compact class to the table to reduce table width.

<table id="example" class="display compact" cellspacing="0" width="100%">

DEMO

See this jsFiddle for code and demonstration.