Dữ liệu cuộn ngangTables.js

Question

Tôi gặp khó khăn khi cuộn ngang để làm việc với dataTables.js. Kết quả mong đợi là một bảng cho phép tôi cuộn theo chiều ngang trong bảng. Kết quả hiện tại là một bảng mở rộng ra bên ngoài div vùng chứa. Bất kỳ giải pháp?

HTML:

<div class="box-body table-responsive"> 
    <table id="portal-drivers" class="table table-bordered table-striped" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Email</th> 
       <th>Number</th> 
       <th>Rating</th> 
       <th>Transactions</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Bugs</td> 
       <td>Bunny</td> 
       <td>bugs@tunesquad.com</td> 
       <td>(310) 530-6789</td> 
       <td>4.8</td> 
       <td>309239045293459823945234895</td> 
      </tr> 
      </tbody>     
    </table> 

CSS:

.table-striped > tbody > tr:nth-child(odd) > td, 
.table-striped > tbody > tr:nth-child(odd) > th { 
    white-space: nowrap; 
} 
#portal-drivers { 
    overflow: auto; 
} 

JQuery

$("#portal-drivers").dataTable({ 
    "scrollX": true 
}); 

Answer 1

Thay đổi "scrollX" thành "sScrollX": '100%'

$("#portal-drivers").dataTable({ 
    "sScrollX": '100%' 
}); 

Answer 2

Hãy thử đặt này vào CSS:

#portal-drivers { 
    overflow-x: scroll; 
    max-width: 40%; 
    display: block; 
    white-space: nowrap; 
} 

Answer 3

Để thực hiện DataTable cuộn (header và cơ thể cả hai), sử dụng tài sản sScrollXInner cùng với sScrollX như sau:

$("#my-demo-datable").dataTable({ 
    "sScrollX": "100%", 
    "sScrollXInner": "110%", 
}); 

Answer 4

Để tạo dữ liệu có thể cuộn, bạn có thể thử điều này

$(document).ready(function() { 
    $('#example').DataTable({ 
     *"scrollY": 200, 
     "scrollX": true 
    }); 
})