1.实现自定义列宽
"bAutoWidth": false,
2.表格的列比较多时,X轴显示滚动条
代码如下:
//样式设置
<style type="text/css">
th, td { white-space: nowrap;word-break:break-all; }
</style>
//datatables属性设置:
scrollX:true,//水平滚动
responsive: false,//关闭响应式效果,否则以上设置无效
3.表格的列比较多时,列收缩显示
代码如下:
注意:引入相关文件(dataTables.responsive.css & dataTables.responsive.min.js)
下载链接: https://download.youkuaiyun.com/download/mister_snail/10807569
//样式设置
<style type="text/css">
th, td { white-space: nowrap;word-break:break-all; }
</style>
//datatables属性设置:
flexibleWidth: false,
responsive: true,
"bAutoWidth": false, //自定义列宽
columns: [{ data: 'taskNumber',"width":"200px" }] //设置列宽像素
4.表格的列比较多时,列宽不变化超出部分以 “…” 显示样式如下:
代码如下:
//样式设置
<style type="text/css">
table{
table-layout:fixed;
}
th, td {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
}
</style>
//datatables属性设置:
responsive: false,
bAutoWidth: true,