jquery datatable设置垂直滚动后,表头(th)错位问题
2016-04-18 14:20
561 查看
jquery datatable设置垂直滚动后,表头(th)错位问题
问题描述:
我在datatable里设置:”scrollY”: ‘300px’,垂直滚动属性后,表头的宽度就会错位,代码如下:<!-- HTML代码 --> <table id="demo" class="table" cellspacing="0" width="100%"> <thead class="the-box"> <tr> <th style="width: 50px;text-align: left;font-size: 13px; padding-left: 8px">表头1 </th> <th style="width: 100px;text-align: left;font-size: 13px; padding-left: 8px">表头2</th> </tr> </thead> <tbody></tbody> </table>
//加载表格 $('#demo').dataTable().fnDestroy(); $('#demo').dataTable({ data: tableData, //json数据 "bProcessing": true,//正在处理提示 "scrollY": '300px', //支持垂直滚动 "scrollCollapse": true, "paging": false, "columnDefs": [{ //数据渲染 "render": function (data, type, row) { return '<div class="text-indentation-s" title="' + data + '">' + data + '</div>'; }, "targets": 0 }, { //"visible": false, "render": function (data, type, row) { return '<div class="text-indentation-b" title="' + data + '">' + data + '</div>'; }, "targets": [1] }] });
效果:
解决方法:
给 table 设置一个样式:table-layout:fixed(固定表格布局):
<!-- HTML代码 --> <table id="demo" class="table" style="table-layout:fixed" cellspacing="0" width="100%"> <thead class="the-box"> <tr> <th style="width: 50px;text-align: left;font-size: 13px; padding-left: 8px">表头1 </th> <th style="width: 100px;text-align: left;font-size: 13px; padding-left: 8px">表头2</th> </tr> </thead> <tbody></tbody> </table>
固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。
相关文章推荐
- 高效Web开发的10个jQuery代码片段
- 高效Web开发的10个jQuery代码片段
- jQuery 如何给Carousel插件添加新的功能
- jQuery.extend 函数详解
- jQuery片段1.0
- jquery-validate动态添加表单元素动态验证
- jQuery返回顶部代码
- JQuery获取文件大小
- 高效Web开发的10个jQuery代码片段
- 浅谈jQuery中setInterval()方法
- 高效Web开发的10个jQuery代码片段
- jquery 对象级插件写法
- 文本溢出解决方案---jquery-dotdotdot插件的使用方法
- jQuery Validate插件实现表单强大的验证功能
- jquery+html5制作超酷的圆盘时钟表
- jQuery实现的手机发送验证码倒计时效果代码分享
- Jquery倒计时源码分享
- jQuery hover 延时器实现代码
- jQuery移除指定元素后的所有元素
- jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)