html 水平滚动dataTables.js

bsxbgnwa 于 2022-12-02 发布在其他

关注(0)|答案(5)|浏览(133)

我在使用dataTables.js进行水平滚动时遇到了困难。预期的结果是一个允许我在表中水平滚动的表。当前的结果是一个扩展到容器div之外的表。有什么解决方案吗？
于飞：

<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;
}

JQuery语言

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

Html

来源：https://stackoverflow.com/questions/24717184/horizontal-scroll-datatables-js

5条答案

按热度按时间

utugiqy61#

将“scrollX”更改为“sScrollX”：'百分百'

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

赞(0）回复(0）举报 2022-12-02

ovfsdjhp2#

要使数据表可滚动**（标题和正文）**，请按如下所示使用属性sScrollXInner和sScrollX：

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

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

赞(0）回复(0）举报 2022-12-02

fxnxkyjh3#

尝试将此内容放入CSS：

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

赞(0）回复(0）举报 2022-12-02

hujrc8aj4#

我试过了，

$(document).ready(function() {
    $('#example').dataTable( {
        "sScrollX": "100%",
        "sScrollXInner": "110%",
        "bScrollCollapse": true
    } );
} );

要启用x滚动，您可以将容器 Package 器的宽度sScrollX参数设置为。此外，sScrollXInner在此处用于强制表比严格需要的宽度更宽。

赞(0）回复(0）举报 2022-12-02

r1zhe5dt5#

要使数据表可滚动，可以尝试以下方法

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

赞(0）回复(0）举报 2022-12-02

我来回答

html 水平滚动dataTables.js

5条答案

相关问题

热门标签

最新问答