水平滚动 dataTables.js

新手上路,请多包涵

我很难让水平滚动与 dataTables.js 一起使用。预期结果是一个允许我在表格内水平滚动的表格。当前结果是一个扩展到容器 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>

CSS:

 .table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  white-space: nowrap;
}
#portal-drivers {
  overflow: auto;
}

查询

$("#portal-drivers").dataTable( {
    "scrollX": true
} );

原文由 Ryan Salmons 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 475
2 个回答

将 “scrollX” 更改为 “sScrollX”: ‘100%’

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

原文由 Ryan Salmons 发布,翻译遵循 CC BY-SA 3.0 许可协议

为了使数据表可滚动 (标题和正文) ,使用属性 sScrollXInner 以及 sScrollX 如下:

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

sScrollXInner 设置为 100% 将允许表格响应并仅在表格溢出时显示滚动条。在 110% 时,它将始终溢出。

原文由 Ramraj Patel 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题