क्षैतिज स्क्रॉल डेटाटेबल्स.जेएस

Question

मुझे डेटाटेबल्स.जेएस के साथ काम करने के लिए क्षैतिज स्क्रॉल प्राप्त करने में कठिनाई हो रही है। अपेक्षित परिणाम एक सारणी है जो मुझे तालिका के भीतर क्षैतिज रूप से स्क्रॉल करने की अनुमति देती है। वर्तमान परिणाम एक सारणी है जो कंटेनर div के बाहर फैली हुई है। कोई समाधान?

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> 

सीएसएस:

.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

बदलें "scrollX" से "sScrollX": '100%'

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

Answer 2

सीएसएस में इस डाल का प्रयास करें:

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

Answer 3

आदेश datatable स्क्रॉल (हेडर और शरीर दोनों) बनाने के लिए, निम्नलिखित के रूप में sScrollX के साथ संपत्ति sScrollXInner का उपयोग करें:

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

Answer 4

datatable स्क्रॉल करने योग्य, तो आप इस

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