垂直滾動設置影響水平滾動使用數據表

Question

我想創建一個具有垂直但不水平滾動的數據表。我使用這裏創建表語句如下：

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

目前我列比屏幕寬，這將導致水平滾動條與「scrollX」甚至會出現：假的。我可以讓水平滾動條不出現的唯一方法是刪除「scrollY」：300.當我刪除垂直滾動屬性時，水平滾動條消失。

所以我的問題是兩部分。

1. 如何強制列以適應屏幕？
2. 如何停止水平滾動條，同時仍然允許垂直滾動？

Answer 1

解決方案＃1

您可以使用Responsive分機，如果列中的數據不適合到頁面/容器。

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

DEMO

見this jsFiddle代碼和演示。

溶液＃2

可以與columnDefs.width禁用自動寬度計算autoWidth:false並設定最小寬度，如下所示。

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

DEMO

見this jsFiddle代碼和演示。