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。当我删除Verticle滚动属性时，水平滚动条消失。

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

如何强制列适合屏幕？
如何在允许垂直滚动的同时停止水平滚动条？

Answer 1

解决方案＃1

如果列中的数据不适合页面/容器，则可以使用Responsive扩展名。

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

<强>样本

请参阅this 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%">

<强>样本

请参阅this jsFiddle以获取代码和演示。

Answer 2

刚遇到这个问题，正在拔头发寻找解决方案，结果删除了我的 TABLE 上的左右边框修复了它。每边的微小 1 像素导致滚动条出现。

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

使用数据表进行水平滚动的垂直滚动设置

2 个答案: