如果我缩放 67%，如何删除数据表中的垂直滚动

Question

在我的 html Jquery data table 我不想要垂直和水平滚动 所以在正常缩放（100%）的情况下，表格可以正常显示，这很好，但是如果我在那个时候减少缩放（67%）垂直滚动来了，那么我怎样才能删除这个垂直滚动呢？

这是我想要的正常图像

此图像用于 67% 缩放

这是我的数据表代码：

<table  datatable="ng" dt-options="table.dtOpt_SalesEntry" dt-column-defs="table.dtColDefs_SalesEntry" class="row-border hover table-responsive display nowrap">
<thead>
    <tr>
        <th class="thbg">{{'salesorder.sales_sr'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_qtyorder'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_qtypur'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_unit'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_uprice'| translate}}</th>
        <th class="thbg">Charge Feb.</th>
        <th class="thbg">Charge Labor</th>
        <th class="thbg">Charge Material</th>
        <th class="thbg">Charge Nre.</th>
        <th class="thbg">Charge Stencil</th>
        <th class="thbg">Charge Design</th>
        <th class="thbg">Charge Other</th>
        <th class="thbg">{{'salesorder.sales_action'| translate}}</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th class="thbg">{{'salesorder.sales_sr'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_qtyorder'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_qtypur'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_unit'| translate}}</th>
        <th class="thbg">{{'salesorder.sales_uprice'| translate}}</th>
        <th class="thbg">Charge Feb.</th>
        <th class="thbg">Charge Labor</th>
        <th class="thbg">Charge Material</th>
        <th class="thbg">Charge Nre.</th>
        <th class="thbg">Charge Stencil</th>
        <th class="thbg">Charge Design</th>
        <th class="thbg">Charge Other</th>
        <th class="thbg">{{'salesorder.sales_action'| translate}}</th>
    </tr>
</tfoot>
<tbody>
    <tr ng-repeat="list in table.process_data.sale_entry">
        <td>{{ $index + 1}}</td>
        <td>{{ list.qty_ordered}}</td>
        <td>{{ list.qty_purchased}}</td>
        <td>{{ list.entryunit}}</td>
        <td>{{ list.unit_price}}</td>
        <td>{{list.charge_fab}}</td>
        <td>{{list.charge_labor}}</td>
        <td>{{list.charge_material}}</td>
        <td>{{list.charge_nre}}</td>
        <td>{{list.charge_stencil}}</td>
        <td>{{list.charge_design}}</td>
        <td>{{list.charge_other}}</td>
        <td>
            <button type="button" class="btn btn-sm btn-warning tbar" ng-click="table.editEntry($index);table.SalesEntryInput = true" uib-tooltip="{{'crm.TOOLTIPMSG.EDITBUTTON'|translate}}" uib-tooltip-trigger="focus" uib-tooltip-placement="top" ><i class="fa fa-pencil fa-lg"></i></button>
            <button class="btn btn-sm btn-danger tbar" ng-click="table.demo5('entry', list.id)" uib-tooltip="{{'crm.TOOLTIPMSG.DELETEMSG'|translate}}" uib-tooltip-trigger="focus" uib-tooltip-placement="top" ><i class="fa fa-trash-o fa-lg"></i></button>
        </td>
    </tr>
</tbody>
</table>

Answer 1

除非您打算将相同的规则应用于其他地方，否则请手动将其设置到此表，或者在页面开头使用内联 style 属性或 <style> 标记设置表 overflow: hidden;

<table datatable="ng" dt-options="table.dtOpt_SalesEntry" dt-column-defs="table.dtColDefs_SalesEntry" style="overflow: hidden;" class="row-border hover table-responsive display nowrap">