的DataTable水平滾動不工作

Question

HTML代碼：

<table class="display table table-bordered table-striped" id="example" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>Create Date</th> 
     <th>Project Name</th> 
     <th>Property Type</th> 
     <th>Project Address</th> 
     <th>Area</th> 
     <th>ZIP Code</th> 
     <th>City</th> 
     <th>State</th> 
     <th>Owner Name</th> 
     <th>Owner E-mail</th> 
     <th>Owner Mobile</th> 
     <th>Owner Type</th> 
     <th>BHK</th> 
     <th>Bathroom</th> 
     <th>Balcony</th> 
     <th>Builtup</th> 
     <th>Carpet</th> 
     <th>Unit</th> 
     <th>Furniture Status</th> 
     <th>Sell Type</th> 
     <th>Sell Price</th> 
     <th>Registration Charge</th> 
     <th>Monthly Rent</th> 
     <th>Maintanace</th> 
     <th>Security Deposit</th> 
     <th>Bachelors</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="gradeX"> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <th>Create Date</th> 
     <th>Project Name</th> 
     <th>Property Type</th> 
     <th>Project Address</th> 
     <th>Area</th> 
     <th>ZIP Code</th> 
     <th>City</th> 
     <th>State</th> 
     <th>Owner Name</th> 
     <th>Owner E-mail</th> 
     <th>Owner Mobile</th> 
     <th>Owner Type</th> 
     <th>BHK</th> 
     <th>Bathroom</th> 
     <th>Balcony</th> 
     <th>Builtup</th> 
     <th>Carpet</th> 
     <th>Unit</th> 
     <th>Furniture Status</th> 
     <th>Sell Type</th> 
     <th>Sell Price</th> 
     <th>Registration Charge</th> 
     <th>Monthly Rent</th> 
     <th>Maintanace</th> 
     <th>Security Deposit</th> 
     <th>Bachelors</th> 
    </tr> 
    </tfoot> 
</table> 

jQuery代碼：

$(document).ready(function() { 
     $('#example').dataTable({ 
      "aaSorting": [[ 4, "desc" ]], 
      "scrollX": true 
     }); 
    }); 

我從官方數據表網站複製jQuery代碼。但它並不在我的網站上。我試過sscrollX。它工作，但它改變th和td的寬度。我該如何解決它？請幫幫我。對於我弱小的英語感到抱歉。

Answer 1

添加這個CSS到您的數據表的容器：

overflow-x: auto;