垂直滚动设置影响数据表的水平滚动

Question

我正在尝试创建一个具有垂直但不水平滚动的数据表。我这里使用的建表语句如下：

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

目前我的列比屏幕宽，这会导致即使使用“scrollX”：false也会出现水平滚动条。我可以让水平滚动条不出现的唯一方法是删除“scrollY”：300。当我删除垂直滚动属性时，水平滚动条就会消失。

所以我的问题分为两部分。

1. 如何强制列适合屏幕？
2. 如何停止水平滚动条同时仍允许垂直滚动？

Answer 1

解决方案#1

如果列中的数据不适合页面/容器，您可以使用响应式扩展。

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

演示版

有关代码和演示，请参阅此 jsFiddle 。

解决方案#2

您可以禁用自动宽度计算autoWidth:false并设置最小宽度，columnDefs.width如下所示。

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

您还可以compact向表格添加类以减少表格宽度。

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

演示版

有关代码和演示，请参阅此 jsFiddle 。