实例讲解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关于命名空间的函数实例
Feb 05 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
详解Node 定时器
Feb 26 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
js代码编写无缝轮播图
Sep 13 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
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php日历[测试通过]
2008/03/27 PHP
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
JS中的多态实例详解
2017/10/15 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Python读写锁实现实现代码解析
2020/11/28 Python
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
见习期自我鉴定
2013/11/07 职场文书
手机业务员岗位职责
2013/12/13 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
小班下学期评语
2014/05/04 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL