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

Question

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

$(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%">

Answer 2

在启用滚动后，放置以下CSS来禁用水平滚动

.dataTables_scrollBody {
        overflow-x: hidden !important;
    }

Answer 3

刚刚有这个问题，并把我的头发揪出来寻找解决方案，结果是删除我的TABLE上的左右边界固定了它。每边的小1px会导致滚动条出现。

<table id="example" class="display sortable" cellspacing="0" width="100%">
.sortable {
    border-left:none;
    border-right:none;
}