我很难让水平滚动与 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 许可协议
将 “scrollX” 更改为 “sScrollX”: ‘100%’