实例讲解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固定表格宽度(设置横向滚动条)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js模拟滚动条(横向竖向)

    js模拟滚动条(横向竖向)

    JS: 复制代码 代码如下: (function(win){     var doc = win.document,db = doc.body;     var mousewheel = 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';     var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);};     skyScroll

  • 基于jquery的横向滚动条（滑动条）

    查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(IE6,Firefox,Chrome).最后决定使用JQuery的Slider控件. 1. 下载jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js 2. Html 复制代码 代码如下: <div id="topslider" runat="server"></div> <div id

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

    当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%",至于css的100%为什么不生效,原因未知. 下面就说说设置如何给datatables设置固定的宽度. 1.html代码 <div id="tableArea"> <table id="userTable" class="display ta

  • 解决layui数据表格table的横向滚动条显示问题

    加上这段样式代码就可以解决了: <link type="text/css" rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" /> <style> body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ </style> ps:这个问题fly社区给出的解释是:table 列

  • python XlsxWriter模块创建aexcel表格的实例讲解

    安装使用pip install XlsxWriter来安装,Xlsxwriter用来创建excel表格,功能很强大,下面具体介绍: 1.简单使用excel的实例: #coding:utf-8 import xlsxwriter workbook = xlsxwriter.Workbook('d:\\suq\\test\\demo1.xlsx') #创建一个excel文件 worksheet = workbook.add_worksheet('TEST') #在文件中创建一个名为TEST的shee

  • jQuery制作全屏宽度固定高度轮播图(实例讲解)

    前端新手自己写的,练习一下基本功,也是留下的第一次记录 html部分 div class="cm-banner"> <div class="cm-banner-list"> <ul id="cm_banner_list"> <!--图片宽度和高度在css中定为1920x300--> <li><img src="cm-banner-01.png" /></l

  • C#对Word文档的创建、插入表格、设置样式等操作实例

    using Word; 下面的例子中包括C#对Word文档的创建.插入表格.设置样式等操作: (例子中代码有些涉及数据信息部分被省略,重要是介绍一些C#操作word文档的方法) public string CreateWordFile(string CheckedInfo) ...{ string message = ""; try ...{ Object Nothing = System.Reflection.Missing.Value; Directory.CreateDirect

  • Python中用xlwt制作表格实例讲解

    在Python中,我们也可以用xlwt来制作excel表格,是不是很神奇,接下来一起学习吧. 举例: import xlwt wb = xlwt.Workbook(encoding = 'ascii') #创建实例,并且规定编码 ws = wb.add_sheet('My Worksheet') #设置工作表名称 ws.write(0,0,'first') #向表格中插入字符串,前两位数字分别为行和列,第三个参数为要插入的内容,第四个参数可以设置样式 wb.save('test.xls') #将

  • 微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

    微信小程序页面向下滚动时tab栏固定页面顶部实例讲解

    先看一下效果图: index.wxml <view class='{{tabIsTop ? "fixedTop" : ""}}'> <i-tabs tabcurrent="{{tabcurrent}}" color="#FF0000" bindchange="tabChange"> <i-tab key="tab1" title="车主圈"

  • 使用JavaScript实现表格编辑器(实例讲解)

    使用JavaScript实现表格编辑器(实例讲解)

    实现效果: html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格编辑器</title> <link rel="stylesheet" type="text/css" href="css/tableWrite.css" rel="external nofo

  • 删除table表格行的实例讲解

    实例如下: function getRowObj(obj) { while(obj.tagName.toLowerCase()!="tr") // toLowerCase转化小写 { obj=obj.parentNode; } // 得到父节点 return obj; } function sc(obj) // sc为点击事件 { var tr=this.getRowObj(obj); // 调用上面的方法 tr.parentNode.removeChild(tr); // 得到tr的

  • 基于TabLayout中的Tab间隔设置方法(实例讲解)

    基于TabLayout中的Tab间隔设置方法(实例讲解)

    TabLayout和ViewPager搭配使用,是有很多方便性,但是TabLayout这东西还是有很多被人吐槽的地方. 这里只讲怎么设置tab之间的间隔,网上找了一堆方法,什么padding和margin的啥都没用,没办法,想用TabLayout只能自己想办法了.效果如下: 一.实现方法,既然这东西不好设置,那就直接在背景上做点事情,布局代码如下: <android.support.design.widget.TabLayout xmlns:app="http://schemas.andr

随机推荐