html固定表的属性是什么,css如何固定表头

cf63ad269910cb25a35547b4b9ee6705.png

css如何固定表头

实现头部导航栏固定用到的属性是:position:sticky 。

粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素。盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

首先给任意父节点设置:verflow:visible;如果是overflow:hidden的话,那就无法滚动了。

例子:

Demo

IDNameGender

1TomMale2AbbottMale3AlanFemale

css:#container{

background: #eee;

width: 150px;

height: 1000px;

overflow:visible;

border:1px solid red;

}

.theadSticky{

position:sticky;

top:10px;

}

table{

border:1px solid red;

}

效果图:

963b70210cd0c577ad23f1b1c629e08a.gif

更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!

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

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

相关文章

HTML--注册页面案例

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> </head> <body> <!--表里标签&#xff1a;action:提交的地址 method&#xff1a; get…

科技界内卷化如何破

本文转载自李侠科学网博客撰文 | 李侠&#xff08;上海交通大学科学史与科学文化研究院教授&#xff09;众所周知&#xff0c;2020年内卷化成为一个年度热词&#xff0c;它本是美国文化人类学家吉尔茨&#xff08;Clifford Geertz&#xff0c;1926-2006&#xff09;提出的一个概…

动态规划--Leetcode63.不同路径二

一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为“Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为“Finish”&#xff09;。 现在考虑网格中有障碍物。那么从左上角到右下角将…

IEEE:2021年的机遇、挑战以及关键的科技趋势

来源&#xff1a;笑看国际风云【导读】近日&#xff0c;一直致力于通过推动科技进步以造福全人类、全球最大的专业技术组织IEEE&#xff08;电气电子工程师学会&#xff09;&#xff0c;发布了《IEEE全球CIO、CTO访问调研&#xff1a;2021年的机遇和挑战&#xff0c;以及关键的…

边缘AI是内存技术发展的催化剂

来源&#xff1a;北京物联网智能技术应用协会人工智能的崛起&#xff0c;对内存系统提出了一些新要求。今天的内存技术能够满足AI时代下的新应用吗&#xff1f;从长远来看&#xff0c;新兴内存技术对边缘 AI有什么前景?首先要意识到的是“边缘AI”应用没有特定标准;“边缘”在…

金叉成功率_一个非常强烈的买卖信号:三金叉见顶,三死叉见底,短短10字,但是成功率却远超“金叉买,死叉卖”...

(本文由公众号越声投顾(yslcw927))整理&#xff0c;仅供参考&#xff0c;不构成操作建议。如自行操作&#xff0c;注意仓位控制和风险自负。)为什么做交易的人95%是要被市场打败出局?一、炒股最困难的不是选股&#xff0c;也不是买卖&#xff0c;而是等待;人生最困难的不是努力…

《中国基础研究竞争力报告2020》发布,6图表速览报告核心结论

来源&#xff1a; 科学出版社持续跟踪先进国家基础研究发展态势&#xff0c;准确研判我国基础研究竞争力&#xff0c;科学筹划基础研究发展&#xff0c;对于打造科技核心竞争力、构筑先发优势、蓄积长远发展原动力&#xff0c;具有重要战略意义。为了支撑科技创新&#xff0c;中…

「九章」刷屏的背后:万字长文解析,量子计算机和电子计算机各有何优劣?

来源&#xff1a;机器学习研究组订阅号近日&#xff0c;中科大校友、UC伯克利在读博士、知乎用户SIY.Z 在一篇近两万字的长文中&#xff0c;详细分析了“量子计算机和传统电子计算机在算法方面的优劣势”。以下是原文内容:这是一篇我很早以前就想写的文章。我的目的是给稍有数学…

关于计算机的网络作文,关于网络世界的作文

关于网络世界的作文在学习、工作乃至生活中&#xff0c;大家对作文都不陌生吧&#xff0c;根据写作命题的特点&#xff0c;作文可以分为命题作文和非命题作文。那么你有了解过作文吗&#xff1f;以下是小编精心整理的关于网络世界的作文&#xff0c;欢迎阅读&#xff0c;希望大…

xml--Schema约束

<?xml version"1.0" encoding"UTF-8"?> <!-- xmlns: xml namespace&#xff1a;名称空间/ 命名空间 targeNamespace&#xff1a;目标名称空间&#xff0c;下面定义的那些元素都与这个名称空间绑定上 elementFormDefault&#xff1a; 元素的格式…

被称为“第五代 AI”的神经形态计算进展到哪一步了?

来源&#xff1a;北京物联网智能技术应用协会AI可以像人脑一样运作吗&#xff1f;几十年来&#xff0c;研究人员一直在问这个问题&#xff0c;这个大家长期求索的问题引起了质疑、嘲笑、轻蔑等不同态度。但是现在&#xff0c;神经形态计算让世界变得更美好的梦想更近了一些。当…

oc 画一个圆弧_UG建模一个蜗杆的方法,纯手工建模无插件

上次我们画了一个蜗杆&#xff0c;今天就来建模一个涡轮模型&#xff0c;也是非常简单。这次还是无尺寸的随意建模&#xff0c;做出这么一个涡轮&#xff0c;来看看建模方法吧&#xff01;1 首先在XY平面上绘制一个直径100的圆&#xff0c;上下拉伸10mm2 对圆柱上下面倒斜角3mm…

Leetcode--11. 盛水最多的容器

给定 n 个非负整数 a1&#xff0c;a2&#xff0c;...&#xff0c;an&#xff0c;每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线&#xff0c;垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0)。找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多…

《城市大脑全球标准研究报告》发布会将于12月23号在北京举办

城市大脑全球标准研究组《城市大脑全球标准研究报告》发布会将于2020年12月23日下午在北京海淀区城市大脑展览厅举办&#xff0c;发布会除了报告发布&#xff0c;智能产业专家演讲&#xff0c;也将参观海淀城市大脑的发展情况。欢迎新闻媒体、科研机构、科技企业、政府部门的记…

java 实现打印条形码_条码打印软件中如何设置条形码下面的字符间距?

条形码有两部分组成&#xff0c;上面是黑白条图案&#xff0c;用于扫描设备的识别&#xff0c;下面是条形码数据&#xff0c;方便在没有扫描设备的情况下可以手动去搜索相关的信息。一般用条码打印软件制作条形码&#xff0c;下面的条形码数据间距是自动生成的&#xff0c;而在…

用跑得最慢的电脑程序,理解最高深的哥德巴赫猜想

五条规则的图灵机可视化。每列像素代表一步计算&#xff0c;步骤从左到右。黑色代表1。最右边表示图灵机的停机。&#xff08;图片来源&#xff1a;Peter Krumins/Quanta Magazine&#xff09;文章来源&#xff1a;环球科学“忙碌的河狸”这个问题的目的是为了找到运行时间最长…

Leetcode--42.接雨水

给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图&#xff0c;在这种情况下&#xff0c;可以接 6 个单位的雨水&#xff08;蓝色部分表示雨水&#…

云专网和云专线的区别_传统IDC行业与云计算的区别?

1.传统IDC行业和云计算在服务类型上的区别&#xff1a;传统IDC行业主要是有两种模式&#xff1a;租用和托管租用是自己没有服务器&#xff0c;机房提供服务器、带宽、IP地址、机位、服务器维护等。这种模式是租用。托管是自己购买配置服务器&#xff0c;通过快递、物流等方式把…

计算机插件技术应用原理,计算机软件技术中插件技术的运用

计算机软件技术中插件技术的运用在我国科技水平的不断提升下,计算机软件方面的功能也在持续更新。其中插件技术作为计算机软件中实用性比较强的一项功能,一直被研究分析。下面是小编搜集整理的相关内容的论文&#xff0c;欢迎大家阅读参考。摘要&#xff1a;随着经济和科学技术…

未来30年,这20项技术将颠覆人类生活

来源&#xff1a;嵌入式资讯精选美国公布了一份长达35页的《新兴科技趋势报告》。该报告是在美国过去五年内由政府机构、咨询机构、智囊团、科研机构等发表的32份科技趋势相关研究调查报告的基础上提炼形成的。通过对近700项科技趋势的综合比对分析&#xff0c;最终明确了20项最…