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>

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

转载于:https://www.cnblogs.com/rysinal/p/5834444.html

jquery datatable设置垂直滚动后，表头(th)错位问题相关推荐

iphone的图书iBooks如何设置垂直滚动看书
首先只有升级到了ios14以上的机型的ibook才会有这个功能.iphone6和以下的机型只能升级到ios12,它们的ibook是没有这个功能了. iphone6s以上的机型升级到了ios14,自带的 ...
Jquery cookies 设置1小时后失效
var expiresDate= new Date(); expiresDate.setTime(expiresDate.getTime() + (60*60*1000)); $.cookie('tp ...
原生js获取和设置页面垂直滚动高度
最近想用原生js实现一些交互效果,以下代码是返回顶部按钮要用到的一个方法:获取和设置页面垂直滚动高度,如果用jq可以简单实现,用原生js,其实就是要多考虑浏览器的兼容性: /*** 获取&&a ...
jquery DataTable默认显示指定页
主要添加iDisplayStart和iDisplayLength参数即可 $('#tbshow').DataTable({"paging": true,"aLengthM ...
表格插件JQuery.DataTable教程
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量的演示和详细的文档进行说明 ...
css 设置 table 样式：表头固定，内容垂直方向滚动
css 设置 table 样式:表头固定,内容垂直方向滚动一.需求二.实现一.需求需要实现下面样式的表格,其中,表头固定.内容垂直方向滚动.鼠标悬停高亮.点击高亮. 基本样式可参考 w3sch ...
jquery dataTable 参数详解
http://www.360doc.com/content/15/0108/14/8790037_439143305.shtml 1 //@translator codepiano2 //@blog ...
JQuery Datatable用法
原文出处:http://sgyyz.blog.51cto.com/5069360/1408251 目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求 ...
jQuery Datatable 实用简单实例
目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时,jQuery Datatable强大的功能支持:排序,分页,搜索等. Query Data ...

jquery datatable设置垂直滚动后，表头(th)错位问题

jquery datatable设置垂直滚动后，表头(th)错位问题

问题描述：

解决方法：

jquery datatable设置垂直滚动后，表头(th)错位问题相关推荐

最新文章

热门文章