实例讲解DataTables固定表格宽度(设置横向滚动条)
更新时间：2017年07月11日 08:29:46 投稿：jingxian
下面小编就为大家带来一篇实例讲解DataTables固定表格宽度(设置横向滚动条)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
当表格的列比较多的时候，可能就需要固定表格的宽度了，默认的100%宽已经不适应了。默认的100%宽要实现改变窗口大小也100%的话，在table元素上添加width="100%",至于css的100%为什么不生效，原因未知。
下面就说说设置如何给datatables设置固定的宽度。
1、html代码
<div id="tableArea">
<table id="userTable" class="display table table-bordered" cellspacing="0" >
<thead>
<tr>
<th style="display: none">ck</th>
<th>序号</th>
<th>账号</th>
<th>姓名</th>
<th>CPID</th>
<th>CP名称</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
2、覆盖某些样式(我们的样式优先级高，所以会覆盖内置的样式)
#tableArea .dataTables_wrapper {
position: relative;
clear: both;
zoom: 1;
overflow-x: auto;
}
#tableArea table{
width: 800px;
}
这里的overflow-x:auto是新增的，表示表格内容超出宽度后，出现横向滚动条；table的width必须写死宽度，直接写在table元素上不生效，原因未知。
3、设置列宽（可略）
"columns": [
{ "data": "number", "orderable": false ,"width":"100px","searchable": false}
]
4、运行浏览，发现此时，当浏览器窗口小于800像素的时候，表格出现了横向的滚动条，正是我们想要的结果。
5、为什么不用"scrollX":true的配置实现横向滚动条呢？查询它渲染后的网页发现，它把table拆分成了两个表格，一个表示表头，一个表示表体。这不是我想要的，而且它表头的内容若是超出的话是隐藏的。
以上这篇实例讲解DataTables固定表格宽度(设置横向滚动条)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家介绍了String对象的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
本篇文章是对Unit PNG Fix.js有时候在ie6下不正常的解决办法进行了详细的分析介绍，需要的朋友参考下2013-06-06
这篇文章主要为大家详细介绍了JavaScript仿网易选项卡制作代码，具有一定的参考价值，感兴趣的朋友可以参考一下2016-10-10
这篇文章主要为大家详细介绍了纯原生js实现贪吃蛇游戏的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要给大家分享的是学习JavaScript一定要知道的3个小技巧，通常在 Angular 或 React 项目中，code review 时看到一些老式的 JavaScript 代码，就会将开发人员归类为初学者，下面我们就来一起看看初学者需要知道的三个小技巧,需要的朋友可以参考一下2021-12-12
这篇文章主要介绍了基于原生JS封装的Modal对话框插件的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
这篇文章主要为大家详细介绍了微信小程序实现购物车选择规格颜色选中效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要为大家详细介绍了JavaScript实现简易登录注册页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下<BR>2022-01-01
这篇文章主要为大家详细介绍了JS实现音乐导航特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了js实现对ajax请求面向对象的封装的相关资料,需要的朋友可以参考下2016-01-01
最新评论