垂直滚动设置可实现数据表的水平滚动 [英] Vertical Scroll settings effecting horizontal scrolling with Datatables

问题描述

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

I am trying to create a datatable that has vertical but not horizontal scrolling. The create table statement I am using here as follows:

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

当前，我的列比屏幕宽，这会导致即使"scrollX"也显示水平滚动条:false.我无法显示水平滚动条的唯一方法是删除"scrollY":300.当我删除垂直滚动属性时，水平滚动条消失了.

Currently my columns are wider than the screen and this causes a horizontal scroll bar to appear even with "scrollX": false. The only way I can get the horizontal scrollbar to not appear is by removing the "scrollY": 300. When I remove the verticle scrolling property the horizontal scroll bar goes away.

所以我的问题分为两个部分.

So my question is two parts.

1. 如何强制列适合屏幕大小?
2. 如何在仍然允许垂直滚动的同时停止水平滚动条?

推荐答案

解决方案#1

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

You can use Responsive extension if data in your columns don't fit into the page/container.

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

演示

有关代码和演示，请参见此jsFiddle .

See this jsFiddle for code and demonstration.

解决方案2

您可以禁用自动宽度计算autoWidth:false并使用 columnDefs.width 如下所示.

You can disable automatic width calculation autoWidth:false and set minimal width with columnDefs.width as shown below.

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

还可以将compact类添加到表中以减小表的宽度.

Also you can add compact class to the table to reduce table width.

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

演示

有关代码和演示，请参见此jsFiddle .

See this jsFiddle for code and demonstration.

这篇关于垂直滚动设置可实现数据表的水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！