实例讲解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固定表格宽度(设置横向滚动条)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
本文通过实例给大家介绍Bootstrap的Refresh Icon相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-07-07
这篇文章主要介绍了javascript实现详细时间提醒信息效果的方法,涉及javascript操作时间的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
size（）函数用来获取矩阵的行数和列数。接下来通过本文给大家介绍matlab中size()函数的用法，需要的朋友一起学习吧2016-03-03
这篇文章主要介绍了js中关于base64编码的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了JS请求servlet功能,结合具体实例形式分析了javascript使用ajax请求servlet端响应的主要功能代码与相关操作技巧,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了javascript通过回车实现tab切换功能,需要的朋友可以参考下2014-03-03
前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置的功能,为了方便下次找起来方便一些自己在这里记录一下,这篇文章主要给大家介绍了关于JS获取经纬度并根据经纬度得到城市信息的相关资料,需要的朋友可以参考下2023-11-11
在UniApp开发过程中,我们不仅需要掌握各种UI组件的使用方法,还需要了解如何在项目中引入JS文件,在本文中,我将介绍UniApp中如何引入JS的方法,感兴趣的朋友跟随小编一起看看吧2023-09-09
使用onbeforeunload属性后的副作用...2007-03-03
javascript关于open.window子页面执行完成后刷新父页面的问题分析
这篇文章主要介绍了javascript关于open.window子页面执行完成后刷新父页面的问题,实例分析了javascript操作子页面的执行与父页面的刷新技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
最新评论