issue in scrollY in data table - ruby-on-rails

Question

I am want to add data table scroll Y feature its working fine but there is a problem of screen resolution . the screen leave more space from the bellow and it leave space from Y axis like bellow images .
my code-
html.erb
<table class="table table-striped table-hover" id="pendingpodatesort" >
<thead>
<tr>
<th><%= check_box_tag "selectAll", "selectAll" %></th>
<th>Item</th>
<th>Make/Catno</th>
<th>UOM</th>
<th>Qty</th>
<th>Qt_P</th>
<th>Vendor</th>
<th>Phone</th>
<th>No.</th>
<th>Date.</th>
<th>Sort Date</th>
<th>Dlv.Dt</th>
<th>Sort Date</th>
<th>Status</th>
<th>Status Dt</th>
<th>Remarks</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<% #poitems.each do |poitem| %>
<tr>
<% if current_personnel.designation == 4 || current_personnel.designation == 5 %>
<td></td>
<% else %>
<td><%= check_box_tag 'poitem[]' , poitem.id %></td>
<% end %>
<td><%= poitem.item.description %></td>
<% if poitem.make_id != nil %>
<td><%= (poitem.make.brand.name)+"/"+(poitem.make.catno) %></td>
<%else %>
<td></td>
<% end%>
<% if poitem.uom_type == nil %>
<td><%= poitem.item.uom.shortform %></td>
<% else %>
<td><%= Uom.find_by_id((Item.find_by_id(poitem.item_id)).dual_uom_id).shortform %></td>
<% end %>
<td><%= poitem.quantity %></td>
<% if poitem.pending_quantity != nil %>
<td><%= poitem.pending_quantity %></td>
<%else%>
<td><%= poitem.quantity %></td>
<%end%>
<td><%= poitem.purchaseorder.vendor.description.titlecase %></td>
<td><%= poitem.purchaseorder.vendor.ref_ph %></td>
<td>PO/<%= poitem.indent.parentindent.warehouse.shortform + "/"+(poitem.purchaseorder.serial.to_s) %></td>
<% #podate=poitem.purchaseorder.date %>
<td><%= #podate.strftime("%d/%m") %></td>
<td><%= #podate.strftime("%m/%d/%y") %></td>
<% #delivery_days=poitem.purchaseorder.delivery_days %>
<% if #delivery_days != nil %>
<td><%= (#podate+(#delivery_days.days)).strftime("%d/%m") %></td>
<td><%= (#podate+(#delivery_days.days)).strftime("%m/%d/%y") %></td>
<% else %>
<td></td>
<td></td>
<% end %>
<% if poitem.purchaseorder.awaiting_pi_payment==true %>
<td>Awaiting for PI Payment</td>
<td></td>
<% elsif poitem.dispatched==true %>
<td>Despatched</td>
<% if poitem.dispatched_date != nil %>
<td><%= poitem.dispatched_date.strftime("%d/%m") %></td>
<% else %>
<td></td>
<% end %>
<% elsif poitem.received_by_transporter==true %>
<td>Received at Transporter Godown</td>
<% if poitem.received_by_transporter_on != nil %>
<td><%= poitem.received_by_transporter_on.strftime("%d/%m") %></td>
<% else %>
<td></td>
<% end %>
<% elsif poitem.delivered_at_plant==true %>
<td>Delivered at Plant</td>
<% if poitem.delivered_at_plant_on != nil %>
<td><%= poitem.delivered_at_plant_on.strftime("%d/%m") %></td>
<% else %>
<td></td>
<% end %>
<% else %>
<td></td>
<td></td>
<% end %>
<% if poitem.dispatch_details==nil %>
<td><%= (poitem.followup_remarks) %></td>
<% elsif poitem.followup_remarks==nil %>
<td><%= (poitem.dispatch_details)%></td>
<% else %>
<td><%= (poitem.dispatch_details)+', '+ (poitem.followup_remarks) %></td>
<% end %>
<% if PoAttachment.where(po_id: poitem.po_id)[0]== nil %>
<td></td>
<% else %>
<td><% PoAttachment.where(po_id: poitem.po_id).each do |attachment| %>
<%= link_to attachment.document.url, class: "btn btn-default btn-xs" do %>
<i class="glyphicon glyphicon-paperclip"></i><% end %>
<% end %></td>
<% end %>
<td> <%= link_to controller: "purchase_order_items", action: "change_status", id: poitem.id, class: "btn btn-default btn-xs" do%>
<i class="glyphicon glyphicon-pencil"></i>
<% end %></td>
<td><%= submit_tag ">", name: poitem.id, :class => 'btn btn-default btn-xs' %></td>
</tr>
<% end %>
</tbody>
</table>
application.js
$(document).ready(function(){
var filterTable=$("#pendingpodatesort").DataTable({
"dom": '<"wrapper"ilt>',
"scrollY": '510px',
"scrollX": true,
"lengthMenu": [ [-1, 10, 25, 50, 100], ["All", 10, 25, 50, 100] ],
"aoColumns": [
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"iDataSort": 10},
{"bVisible": false},
{"iDataSort": 12},
{"bVisible": false},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true},
{"bSortable": true}
],
"order": [[ 10, "desc" ]]
});
$("#filterbox").keyup(function() {
filterTable.search(this.value).draw();
});
});
How can i adjust this size with out increase zoom on any screen?is there any option to give scroll Y value in %?

Answer 1

Add
scrollCollapse: true
Reference: https://datatables.net/reference/option/scrollCollapse