水平滚动 dataTables.js
Posted
技术标签:
【中文标题】水平滚动 dataTables.js【英文标题】:Horizontal Scroll dataTables.js 【发布时间】:2014-09-03 05:27:26 【问题描述】:我很难让水平滚动与 dataTables.js 一起使用。预期的结果是一个允许我在表格内水平滚动的表格。当前结果是一个延伸到容器 div 之外的表格。有什么解决办法吗?
html:
<div class="box-body table-responsive">
<table id="portal-drivers" class="table table-bordered table-striped" cellspacing="0" >
<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
);
【问题讨论】:
【参考方案1】:将“scrollX”更改为“sScrollX”:'100%'
$("#portal-drivers").dataTable(
"sScrollX": '100%'
);
【讨论】:
scrollx 和 sscrollx 有什么区别? 我还发现添加responsive:false
对我有用。我正在使用 ASP Net Zero,它还向表中添加了一个 dt-responsive
类,应该将其删除。【参考方案2】:
为了使数据表可滚动(标题和正文都),请使用属性sScrollXInner
和sScrollX
,如下所示:
$("#my-demo-datable").dataTable(
"sScrollX": "100%",
"sScrollXInner": "110%",
);
将 sScrollXInner 设置为 100% 将允许表格响应并仅在表格溢出时显示滚动条。在 110% 时,它总是会溢出。
【讨论】:
对我来说,将“sScrollXInner”更改为“100”有助于响应式展示。【参考方案3】:尝试将其放入 CSS 中:
#portal-drivers
overflow-x: scroll;
max-width: 40%;
display: block;
white-space: nowrap;
【讨论】:
真的很好用。我还在数据表应用程序中应用了 "sScrollX": '100%' 但标题出现宽度问题。【参考方案4】:为了让数据表可以滚动,你可以试试这个
$(document).ready(function()
$('#example').DataTable(
*"scrollY": 200,
"scrollX": true
);
)
【讨论】:
以上是关于水平滚动 dataTables.js的主要内容,如果未能解决你的问题,请参考以下文章
水平 UIScrollView 内部有垂直 UIScrollViews - 滚动外部水平视图时如何防止滚动内部滚动视图?