jquery - 数据表水平滚动不起作用

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;