数据表中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();
    });
});

如何在不增加任何屏幕上的缩放的情况下调整此大小？是否有任何选项可以以 % 为单位提供滚动 Y 值？

Answer 1

添加

scrollCollapse: true

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