javascript - 如何修复 DataTables autoWidth 不起作用
问题描述
我尝试使用自动更改表格宽度,但未修复 DataTables。当我使用手机像素尺寸时会发生这种情况。它不会发生在笔记本电脑/台式机像素上。是否有一些缺失的代码?
下图显示数据超出了 DataTables。
HTML
<div class="col-lg-12 col-md-12 col-sm-12 mb-30">
<table id="example" class="display compact nowrap" style="width:100%">
<thead>
<tr>
<th class="table-plus datatable-nosort">Num</th>
<th>Region</th>
.....
</tr>
</thead>
<tbody>
<tr>
<td class="table-plus">1</td>
<td>NORTHERN</td>
.....
</tr>
</tbody>
</table>
</div>
编辑: CSS
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css
https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css
https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css
JS
$(document).ready(function() {
$('#example').DataTable( {
scrollCollapse: true,
autoWidth: true,
responsive: true,
columnDefs: [{
targets: "datatable-nosort",
orderable: false,
}],
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"language": {
"info": "_START_-_END_ of _TOTAL_ entries",
searchPlaceholder: "Search"
},
});
});
解决方案
推荐阅读
- sql - Oracle SQL 查询的性能调优
- javascript - 在每个点上选择四分位数
- python - 我似乎无法向按钮网格添加功能 - tkinter
- python - 无法从 odoo.addons.web.controllers.main odoo 13 导入名称 binary_content
- javascript - 压缩/编码 Node.js 对象/JSON 字符串以插入 PostgreSQL?
- reactjs - Electron:将 JS 文件而不是 HTML 文件加载到 BrowserWindow
- java - 这是在这里使用可选的坏习惯吗?
- python - 如何从不同的子目录读取多个 csv 文件并找到具有值的 csv 文件?
- c++ - C++ 在聚合初始化期间是否对未指定的值进行零初始化?
- c - 在asm中将两个数字相加