水平滾動dataTables.js

我很難讓水平滾動與dataTables.js一起工作。預期的結果是允許我在表格內水平滾動的表格。當前結果是一個擴展到容器div之外的表。任何解決方案水平滾動dataTables.js

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>[email protected]</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 
});

來源

2014-07-12 Ryan Salmons

改變「scrollX」到「sScrollX」： '100％'

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

來源

2014-07-14 04:31:59

嘗試把這個成CSS：

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

來源

2014-07-12 22:53:12 magma

真的很好。我還在數據表應用程序中應用了「sScrollX」：'100％'，但標題出現寬度問題。 – MSTdev

爲了使數據表滾動（標題和正文兩者），使用屬性sScrollXInner與sScrollX沿如下：

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

來源

2016-03-01 20:08:49

對我來說，將「sScrollXInner」更改爲「100」可用於響應式播放。 –

-1

爲了製作數據表可捲動，你可以試試這個

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

來源

2016-06-20 13:03:27 Manpreet

水平滾動dataTables.js

回答

相關問題