Vertical Scroll settings effecting horizontal scrolling with Datatables

问题

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,
    });
} );

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.

How to I force the columns to fit the screen?
How to I stop the horizontal scroll bar while still allowing vertical scrolling?

回答1:

SOLUTION #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
});

DEMO

See this jsFiddle for code and demonstration.

SOLUTION #2

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%" }
   ]        
});

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

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

DEMO

See this jsFiddle for code and demonstration.

回答2:

Just had this issue and was pulling my hair out to find a solution, turns out removing the right and left borders on my TABLE fixed it. The tiny 1 px on each side were causing the scrollbar to appear.

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

来源：https://stackoverflow.com/questions/32847344/vertical-scroll-settings-effecting-horizontal-scrolling-with-datatables

标签

jquery

html

css

datatables