实例讲解DataTables固定表格宽度(设置横向滚动条)


Posted in Javascript onJuly 11, 2017

当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的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固定表格宽度(设置横向滚动条)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
深入详解JS函数的柯里化
Jun 09 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 #Javascript
自定义事件解决重复请求BUG的问题
Jul 11 #Javascript
关于js中的鼠标事件总结
Jul 11 #Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 #Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 #Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 #Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
You might like
改进的IP计数器
2006/10/09 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
[原创]图片分页查看
2006/08/28 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
script标签属性用type还是language
2015/01/21 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
介绍Python中内置的itertools模块
2015/04/29 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Python中的Numpy矩阵操作
2018/08/12 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
俄语专业毕业生推荐信
2013/10/28 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
关于逃课的检讨书
2014/01/23 职场文书
工作违纪检讨书
2014/02/17 职场文书
大学生团员个人总结
2015/02/14 职场文书
如何写通讯稿
2015/07/22 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
Python中npy和mat文件的保存与读取
2022/04/24 Python