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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470802.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三、解决ie缓存问题

解决 IE 缓存问题 问题&#xff1a;在一些浏览器中(IE),由于缓存机制的存在&#xff0c;ajax 只会发送的第一次请求&#xff0c;剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。 在谷歌浏览器中&#xff0c;修改了服务器代码&#xff0c;重新发送请求时&#xff0…

利用BFS和DFS解决 LeetCode 130: Surrounded Regions

问题来源 此题来源于LEETCODE&#xff0c;具体问题详见下面的链接 https://leetcode.com/problems/surrounded-regions/description/ 问题简述 给定一个包含字母 X 和 O 的二维矩阵&#xff0c;找到所有被 X 包围的 O 并将被包围的 O 变成 X。 比如给定如下矩阵&#xff1…

锁!代码锁

一&#xff0c;代码锁 异步 并发&#xff0c;各干各的 (比如&#xff1a;一群人同时上卡车) 同步 步调一致的处理 &#xff08;比如&#xff1a;一群人排队上公交车&#xff09; 多个线程并发读写同一个资源的时候会发生“线程并发安全问题”&#xff0c;如果保证…

imageNamed和imageWithContentsOfFile-无法加载图片的问题

问题描述 图片资源放在Assets.xcassets中&#xff0c;分别用UIImage的类方法imageNamed和imageWithContentsOfFile获取图片对象&#xff0c;但发生奇怪的情况&#xff0c;前者获取到图片对象&#xff0c;后者结果为nil。代码如下&#xff1a; 1.通过UIImage的类方法imageNamed:…

LeetCode 309: 一个很清晰的DP解题思路

问题来源 题目来源链接见下方&#xff1a; https://leetcode.com/problems/best-time-to-buy-and-sell-stock-with-cooldown/description/ 问题简述&#xff1a; 假如有一个 i 个元素的数组&#xff0c;数组的每个元素表示了第 i 天某只股票的价格&#xff0c;设计一种算法来…

五、手动取消ajax请求 解决重复发送请求问题

server.js: // 1. 引入express const express require(express)// 2. 创建应用对象 const app express()// 3. 创建路由规则 app.get(/server, (request, response) > {// 设置响应头 设置允许跨域response.setHeader(Access-Control-Allow-Origin, *)// 设置响应体respo…

linux ps命令详解

ps命令用于监测进程的工作情况。进程是正在运行的程序&#xff0c;一直处于动态变化中&#xff0c;而ps命令所显示的进程工作状态时瞬间的。 使用方式&#xff1a;ps[options][-help] 常用参数&#xff1a; -A &#xff1a;显示所有进程 -a&#xff1a;显示一个终端的所有进程。…

用多元线性回归预测网页访问量(R语言)

前言 该问题来源于《机器学习:实用案例解析》中的第5章。在书中&#xff0c;已经对该问题给出了一种解决方案&#xff0c;但是我觉得写的还是太简略了一些&#xff0c;没有把考虑问题的整个思路给写出来&#xff0c;所以&#xff0c;在这里给出我的一些想法。 问题简述 我们…

六、jQuery 中的 AJAX 跨域问题

第 2 章&#xff1a;jQuery 中的 AJAX 官方中文文档&#xff1a;https://jquery.cuishifeng.cn/jQuery.Ajax.html 2.1 get 请求 $.get(url, [data], [callback], [type]) url:请求的 URL 地址。data:请求携带的参数。callback:载入成功时回调函数。type:设置返回内容格式&a…

LeetCode 474. Ones and Zeroes 动态规划解法+拓展

问题来源 此题来源于LeetCode 474. Ones and Zeroes 在写这篇之前&#xff0c;我百度了一下这道题&#xff0c;发现已经有很多人写过这个问题了&#xff0c;然而大多数只是为了答题而答题&#xff0c;给出了代码&#xff0c;很少有文字解释的&#xff0c;也很少有深入拓展的。…

常用的几种编程语言的介绍

编程语言&#xff08;programming language&#xff09;&#xff0c;来自百度百科的解释为&#xff1a;编程语言是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧&#xff0c;用来向计算机发出指令。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据&a…

三门问题(Monty Hall problem)背后的贝叶斯理论

文章目录1 前言2 问题简介3 直观的解释4 贝叶斯理论的解释1 前言 三门问题可以说有着各种版本的解释&#xff0c;但我看了几个版本&#xff0c;觉得没有把其中的条件说清楚&#xff0c;所以还是决定按照自己的理解记录一下这个特别有意思的问题。 2 问题简介 三门问题&#…

一、在vue项目中使用mock.js(详解)

步骤1.搭建测试项目 步骤1.1创建项目 命令&#xff1a; vue create mock-demo 步骤1.2安装依赖 命令&#xff1a; #使用axios发送ajax cnpm install axios--save #使用mockjs产生随机数据 cnpm install mockjs--save-dev #使用json5解决ison文件&#xff0c;无法添加注释…

matlab如何建立一个空矩阵,然后往里面赋值

1 x1:0.1:10; 2 y[]; 3 for i1:length(x) 4 % y[y;x(i)];%把每一个x都放到Y里&#xff0c;成为一列 5 y[y,x(i)];%把每一个x都放到Y里&#xff0c;成为一行 6 end 转载于:https://www.cnblogs.com/sddai/p/5410821.html

二、在jQuery中使用mockjs

在jQuery项目中使用mock.js 步骤1.搭建项目 步骤1.1创建项目 新建文件夹jquery-mock-demo 步骤1.2新建index.html&#xff0c;引入jquery.js文件和mock.js <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title&g…

决策树相关知识小结

前言 本文是一篇关于决策树方面知识的小结&#xff0c;不包含具体的例子&#xff08;想看例子推荐文献[1]的第4章&#xff09;&#xff0c;主要总结了ID3、C4.5和CART树三者的区别&#xff0c;剪枝处理&#xff0c;连续值和缺失值的处理。 决策树的基本算法 决策树的学习目的…

Android 中如何计算 App 的启动时间?

&#xff08;转载&#xff09; 已知的两种方法貌似可以获取&#xff0c;但是感觉结果不准确&#xff1a;一种是&#xff0c;adb shell am start -w packagename/activity,这个可以得到两个值&#xff0c;ThisTime和TotalTime&#xff0c;不知道两个有什么区别&#xff0c;而且与…

项目实战:Express实现学生管理系统(CRUD)

一、起步 初始化 npm init -y 生成package.json文件 模板处理 cnpm install express --save cnpm install bootstrap --savenpm install --save art-template npm install --save express-art-template//两个一起安装 npm i --save art-template express-art-template文件目录…

2016年度 JavaScript 展望(下)

【编者按】本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能&#xff0c;是《jQuery UI 实践》 一书的作者。 本文系 OneAPM 工程师编译呈现&#xff0c;以下为正文的第二部分。点此阅读第一部分。 本地移动 apps 在2015年&#xff0c;出现了一种新的基…