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代码。但它不是在我的网站上wotking。我试过sscrollX。它工作但它改变了th和td的宽度。我该如何解决？请帮我。抱歉我的英语不好。

Answer 1

将此css添加到您的数据表容器中：

    overflow-x: auto;

Answer 2

我认为这是由于CSS尝试在您的项目中使用它，使其在我的数据表上正常工作

th {
    border: 1px solid black;
    padding: 10px;
}

td {
    border: 1px solid black;
    padding: 10px;
    margin: 0;
}

.DTFC_Cloned {
    border: 0px !important;
}

    .DTFC_Cloned > tbody > tr > th {
        border-right: 1px solid #ccc !important;
    }

/*.DTFC_Cloned > tbody > tr > th {
            border-bottom: 0px;
        }*/
.text-center > tbody > tr > th {
    border-bottom: none !important;
}

.table-bordered {
    border: none;
}

#example > tbody > tr > td, .DTFC_Cloned > tbody > tr > th {
    border-bottom: 1px solid #ccc !important;
    border-top: none !important;
}

数据表水平滚动无法正常工作

2 个答案: