我正在尝试实现列大小调整和stick header。但是,如果我不使用列大小调整,则粘性标头可以很好地工作。如果同时实现这两种方法,则列调整大小是有效的,但粘性标头不起作用。
我使用了primeng的以下CSS作为粘性标头。
:host ::ng-deep .ui-table .ui-table-thead > tr > th { position: -webkit-sticky; position: sticky; top: 70px; } @media screen and (max-width: 64em) { :host ::ng-deep .ui-table .ui-table-thead > tr > th { top: 100px; } }
对于colum调整大小,我使用了以下代码[resizableColumns]="true"
, pResizableColumn
... 如果我删除
resizbleColumns
和pResizableColumn
粘性标头工作正常。我怎样才能使它同时起作用呢?这是stackblitz和演示
1> malbarmawi..:当您将p-table列设置为可调整大小时,请添加一个类,
ui-table-resizable
这将重置一些css属性的th
相对位置之一,因此您将失去粘性这应该解决问题
:host ::ng-deep .ui-table .ui-table-thead > tr > th { position: -webkit-sticky; position: sticky; background: blue; color: white; top: 0px; z-index: 1; } :host ::ng-deep .ui-table-resizable > .ui-table-wrapper { overflow-x: initial !important; } :host ::ng-deep .ui-table-resizable .ui-resizable-column { position: sticky !important; } @media screen and (max-width: 64em) { :host ::ng-deep .ui-table .ui-table-thead > tr > th { top: 0px; } }演示
更新!
在组件装饰器中添加样式是不可重用的,primem主题基础推荐创建自定义样式的建议,我们可以这样做
style.scss
:host ::ng-deep .ui-table .ui-table-thead > tr > th { position: -webkit-sticky; position: sticky; background: blue; color: white; top: 0px; z-index: 1; } :host ::ng-deep .ui-table-resizable > .ui-table-wrapper { overflow-x: initial !important; } :host ::ng-deep .ui-table-resizable .ui-resizable-column { position: sticky !important; } @media screen and (max-width: 64em) { :host ::ng-deep .ui-table .ui-table-thead > tr > th { top: 0px; } }模板
.sticky-table { &.ui-table .ui-table-thead > tr > th { position: -webkit-sticky; position: sticky !important; background: blue; color: white; top: 0px; z-index: 1; } &.ui-table-resizable > .ui-table-wrapper { overflow-x: initial !important; } &.ui-table-resizable .ui-resizable-column { position: sticky !important; } @media screen and (max-width: 64em) { .ui-table .ui-table-thead > tr > th { top: 0px; } } }
演示??
写下你的评论吧 !推荐阅读
本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ... [详细]蜡笔小新 2023-10-17 13:38:49 一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]蜡笔小新 2023-10-17 14:35:15 Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ... [详细]蜡笔小新 2023-10-16 11:26:13 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]蜡笔小新 2023-12-14 18:18:21 本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]蜡笔小新 2023-12-14 17:06:58 本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]蜡笔小新 2023-12-14 15:52:03 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]蜡笔小新 2023-12-14 15:43:50 本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]蜡笔小新 2023-12-14 15:39:51 本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]蜡笔小新 2023-12-14 15:08:18 本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]蜡笔小新 2023-12-13 12:14:55 本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]蜡笔小新 2023-12-12 19:16:21 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]蜡笔小新 2023-12-09 03:01:43 html结构 ... [详细]蜡笔小新 2023-10-17 10:44:03 -像我这样笨拙的生活_992_559这个家伙很懒,什么也没留下!Tags | 热门标签RankList | 热门文章
- 1编译spring源码
- 2使用winforms的元素主机加载时间问题 - Element host loading time issue with winforms
- 3C++类的继承(终极版)简单易懂
- 4MySQL 笔记索引优化
- 5微信支付 JSAPI WeixinJSBridge.invoke 支付成功 IOS 不返回?
- 6Codeforces 1637 D. Yet Another Minimization Problem —— 数学,dp
- 7java 设置gbk_DOS命令运行java程序 解决中文编码问题 GBK
- 8面部绑定之blendTwoAttr_huadingjin_新浪博客
- 9Help needed training mnist lenet5 inspired topology
- 10开发笔记:Struts面试题
- 11python3多线程爬虫(初级)
- 12VB--这种特效是如何做的?
- 13如何修复终端不加载~/。bashrc在OS X Lion上。 - How to fix Terminal not loading ~/.bashrc on OS X Lion
- 14PAT 1026. 程序运行时间
- 15关于python注释_Python注释详解
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有