解决layui数据表格排序图标被超出的表头挤出去的问题


Posted in Javascript onSeptember 19, 2019

如果表头过长,会出现超出显示三个省略号,然后把排序图标挤出去,看不到了,

效果如下

解决layui数据表格排序图标被超出的表头挤出去的问题

解决办法就是给图标加定位,过长的时候加上

解决layui数据表格排序图标被超出的表头挤出去的问题

.show-sort{
      position: absolute;
      right: 7px;
      top: 5px;
    }
$('.layui-table-header tr th').each(function(i,ths){
     $(this).find('span:first').attr('title',$(this).find('span:first').text()); // 划过显示
     if($(this).find('span:first').width() > $(this).find('.layui-table-cell').width()){
       $(this).find('span:last').addClass('show-sort')
     }else{
      $(this).find('span:last').removeClass('show-sort')
     }
   })

修改后效果如下

解决layui数据表格排序图标被超出的表头挤出去的问题

以上这篇解决layui数据表格排序图标被超出的表头挤出去的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
js生成随机数方法和实例
Jan 17 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
微信小程序3D轮播实现代码
Sep 19 #Javascript
layui 实现表格某一列显示图标
Sep 19 #Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 #Javascript
layui按条件隐藏表格列的实例
Sep 19 #Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 #Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 #Javascript
iview form清除校验状态的实现
Sep 19 #Javascript
You might like
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
分享Python字符串关键点
2015/12/13 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
计算机应用与科学个人的自我评价
2013/11/15 职场文书
小学三年级学生评语
2014/04/22 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
裁员通知
2015/04/25 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android