問題scrollY在數據表

Question

我想添加數據表滾動Y功能其工作正常，但有一個屏幕分辨率的問題。屏幕從波紋管留下更多空間，並且像Y軸一樣從波紋管圖像留下空間。

我的代碼 -

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(); 
    }); 
}); 

我怎麼能這樣規模調整與任何屏幕上增加了變焦？有什麼選擇給滾動ÿ價值在％？

Answer 1

添加

scrollCollapse: true 

參考：https://datatables.net/reference/option/scrollCollapse