纯CSS表头固定的实现代码
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
纯CSS实现表头固定之所以难,主要在两点。一是占有最大市场份额的IE6不支持position:fixed。另一个,是人们想破头都想在一起表格中实现这种效果。不过外国真的人用纯CSS实现了这种效果,动用了数量惊人的CSS hacks……我觉得,如果搞到代码如此难懂且难扩展,还不如用javascript好了。碰巧今天我也遇到这种需求,换个视角想想,真的搞出来了。
我们知道,CSS是负责表现,HTML是负责结构,同样的结构,换个样式,给人的感觉完全不同,这也说明人的眼睛是很容易受骗。因此前些狂热鼓吹DIV+CSS的日子里,人们总是想在页面去掉table,用div+span弄出了一个个“table”来。虽然这种事是不可取,但也告诉我们,table做得的事,通过一些组合我们也能做出来。换个思路来说,既然一个table做不了,就两个吧。上面的table模拟表头,下面的table模拟带滚动条的部分。在我们继续讲下去之前,我们先明确一下我们的需求吧,要不太抽象了。首先是表格为4*9,每列宽170px,总为680px,滚动条在各浏览器默认为16px,别忘了,width是不包含border在内,四列就有5个纵向的border,宽总长为701px。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | < table > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > < tr > < td > </ td > < td > </ td > < td > </ td > < td > </ td > </ tr > </ table > |
然后我们把这个table一分为二,第一个table为表头,第二个table要带滚动条,说明要在其父元素上应用overflow样式,因此它要外套一个div。这个div与第一个table应该是等长的。不过不用花心思了,我们在它们的外面最套一个div,设置其width为701px,然后把这两个子元素的宽都设为100%就行了。注意,我们在table中显式添加tbody以提高表格的渲染效率。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | < div id = "scrollTable" > < table class = "thead" > < tbody > < tr > < th >名称</ th > < th >语法</ th > < th >说明</ th > < th >例子</ th > </ tr > </ tbody > </ table > < div > < table class = "tbody" > < tbody > < tr > < td >Simple attribute Selector</ td > < td >[attr] </ td > < td >选择具有此属性的元素</ td > < td >blockquote[title] { < br />color: red }</ td > </ tr > < tr > < td >attribute Value Selector</ td > < td >[attr="value"] </ td > < td >选出属性值精确等于给出值的元素</ td > < td >h2[align="left"] { < br />cursor: hand } </ td > </ tr > < tr > < td >"Begins-with" attribute Value Selector</ td > < td >[attr^="value"] </ td > < td >选出属性值以给出值开头的元素</ td > < td >h2[align^="right"] { < br />cursor: hand } </ td > </ tr > < tr > < td >"Ends-with" attribute Value Selector</ td > < td >[attr$="value"] </ td > < td >选出属性值以给出值结尾的元素</ td > < td >div[class$="vml"]{< br />cursor: hand} </ td > </ tr > < tr > < td >Substring-match attribute Value Selector</ td > < td >[attr*="value"] </ td > < td >选出属性值包含给出值的元素</ td > < td >div[class*="grid"]{< br /> float:left} </ td > </ tr > < tr > < td >One-Of-Many Attribute Value Selector</ td > < td >[attr~="value"] </ td > < td >原元素的属性值为多个单词,给出值为其中一个。</ td > < td >li[class~="last"]{< br /> padding-left:2em} </ td > </ tr > < tr > < td >Hyphen Attribute Value Selector</ td > < td >[attr|="value"] </ td > < td >原元素的属性值等于给出值,或者以给出值加“-”开头</ td > < td >span[lang|="en"]{ < br />color:green}</ td > </ tr > < tr > < td >反选属性值选择器</ td > < td >[attr!="value"] </ td > < td >非标准,jQuery中出现的</ td > < td >span[class!="red"]{< br />color:green}</ td > </ tr > </ tbody > </ table > </ div > </ div > |
表现层部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | #scrollTable { width : 701px ; border : 1px solid #EB8 ; /*table没有外围的border,只有内部的td或th有border*/ background : #FF8C00 ; } #scrollTable table { border-collapse : collapse ; /*统一设置两个table为细线表格*/ } #scrollTable table.thead{ /*表头*/ /*div的第一个子元素*/ width : 100% ; } #scrollTable table.thead th{ /*表头*/ border : 1px solid #EB8 ; border-right : #C96 ; color : #fff ; background : #FF8C00 ; /*亮桔黄色*/ } #scrollTable div{ /*能带滚动条的表身*/ /*div的第二个子元素*/ width : 100% ; height : 200px ; overflow : auto ; /*必需*/ } #scrollTable table.tbody{ /*能带滚动条的表身的正体*/ width : 100% ; border : 1px solid #C96 ; border-right : #B74 ; color : #666666 ; background : #ECE9D8 ; } #scrollTable table.tbody td{ /*能带滚动条的表身的格子*/ border : 1px solid #C96 ; } |
运行代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | <!doctype html> < html dir = "ltr" lang = "zh-CN" > < head > < meta charset = "utf-8" /> < title >纯CSS实现表头固定</ title > < style type = "text/css" > #scrollTable { width:701px; border: 1px solid #EB8;/*table没有外围的border,只有内部的td或th有border*/ background: #FF8C00; } #scrollTable table { border-collapse:collapse; /*统一设置两个table为细线表格*/ } #scrollTable table.thead{ /*表头*/ /*div的第一个子元素*/ width:100%; } #scrollTable table.thead th{/*表头*/ border: 1px solid #EB8; border-right:#C96; color:#fff; background: #FF8C00;/*亮桔黄色*/ } #scrollTable div{/*能带滚动条的表身*/ /*div的第二个子元素*/ width:100%; height:200px; overflow:auto;/*必需*/ } #scrollTable table.tbody{/*能带滚动条的表身的正体*/ width:100%; border: 1px solid #C96; border-right:#B74; color:#666666; background: #ECE9D8; } #scrollTable table.tbody td{/*能带滚动条的表身的格子*/ border:1px solid #C96; } </ style > </ head > < body > < div id = "scrollTable" > < table class = "thead" > < tbody > < tr > < th >名称</ th > < th >语法</ th > < th >说明</ th > < th >例子</ th > </ tr > </ tbody > </ table > < div > < table class = "tbody" > < tbody > < tr > < td >Simple attribute Selector</ td > < td >[attr] </ td > < td >选择具有此属性的元素</ td > < td >blockquote[title] { < br />color: red }</ td > </ tr > < tr > < td >attribute Value Selector</ td > < td >[attr="value"] </ td > < td >选出属性值精确等于给出值的元素</ td > < td >h2[align="left"] { < br />cursor: hand } </ td > </ tr > < tr > < td >"Begins-with" attribute Value Selector</ td > < td >[attr^="value"] </ td > < td >选出属性值以给出值开头的元素</ td > < td >h2[align^="right"] { < br />cursor: hand } </ td > </ tr > < tr > < td >"Ends-with" attribute Value Selector</ td > < td >[attr$="value"] </ td > < td >选出属性值以给出值结尾的元素</ td > < td >div[class$="vml"]{< br />cursor: hand} </ td > </ tr > < tr > < td >Substring-match attribute Value Selector</ td > < td >[attr*="value"] </ td > < td >选出属性值包含给出值的元素</ td > < td >div[class*="grid"]{< br /> float:left} </ td > </ tr > < tr > < td >One-Of-Many Attribute Value Selector</ td > < td >[attr~="value"] </ td > < td >原元素的属性值为多个单词,给出值为其中一个。</ td > < td >li[class~="last"]{< br /> padding-left:2em} </ td > </ tr > < tr > < td >Hyphen Attribute Value Selector</ td > < td >[attr|="value"] </ td > < td >原元素的属性值等于给出值,或者以给出值加“-”开头</ td > < td >span[lang|="en"]{ < br />color:green}</ td > </ tr > < tr > < td >反选属性值选择器</ td > < td >[attr!="value"] </ td > < td >非标准,jQuery中出现的</ td > < td >span[class!="red"]{< br />color:green}</ td > </ tr > </ tbody > </ table > </ div > </ div > </ body > </ html > |
发现表头的格子与表身的格子不对齐。这时我们需要动用col标签,col允许我们统一设置tbody中索引值与它相同的td或th的背景色,文字对齐方式与宽度。虽然CSS2.1的相邻选择器与CSS3的子元素过滤伪类能让我们用更精简的方式设置它们,而且是样式与结构分离那种,可惜IE家族总是拖后腿。我们再看一下它们的长度,由于最后一个表格有可能受滚动条挤压而缩短长度,我们保证前三列长度相等就行了,剩余的都分配给最后一个,换言之,最后一个不用设置。另,IE下可以设置滚动条的样式,我们也把玩一翻吧。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < table class = "thead" > < col width = "170px" ></ col > < col width = "170px" ></ col > < col width = "170px" ></ col >< col ></ col > < tbody > //********************略***************** </ tbody > </ table > < div > < table class = "tbody" > < col width = "170px" ></ col > < col width = "170px" ></ col > < col width = "170px" ></ col >< col ></ col > < tbody > //********************略***************** </ tbody > </ table > </ div > |
表现层部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | #scrollTable { width : 701px ; border : 1px solid #EB8 ; /*table没有外围的border,只有内部的td或th有border*/ background : #FF8C00 ; } #scrollTable table { border-collapse : collapse ; /*统一设置两个table为细线表格*/ } /*表头 div的第一个子元素**/ #scrollTable table.thead{ width : 100% ; } /*表头*/ #scrollTable table.thead th{ border : 1px solid #EB8 ; border-right : #C96 ; color : #fff ; background : #FF8C00 ; /*亮桔黄色*/ } /*能带滚动条的表身*/ /*div的第二个子元素*/ #scrollTable div{ width : 100% ; height : 200px ; overflow : auto ; /*必需*/ scrollbar-face- color : #EB8 ; /*那三个小矩形的背景色*/ scrollbar-base- color : #ece9d8 ; /*那三个小矩形的前景色*/ scrollbar-arrow- color : #FF8C00 ; /*上下按钮里三角箭头的颜色*/ scrollbar-track- color : #ece9d8 ; /*滚动条的那个活动块所在的矩形的背景色*/ scrollbar-highlight- color : #800040 ; /*那三个小矩形左上padding的颜色*/ scrollbar-shadow- color : #800040 ; /*那三个小矩形右下padding的颜色*/ scrollbar -3 dlight- color : #EB8 ; /*那三个小矩形左上border的颜色*/ scrollbar-darkshadow-Color: #EB8 ; /*那三个小矩形右下border的颜色*/ } /*能带滚动条的表身的正体*/ #scrollTable table.tbody{ width : 100% ; border : 1px solid #C96 ; border-right : #B74 ; color : #666666 ; background : #ECE9D8 ; } /*能带滚动条的表身的格子*/ #scrollTable table.tbody td{ border : 1px solid #C96 ; } |
运行代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | <!doctype html> < html dir = "ltr" lang = "zh-CN" > < head > < meta charset = "utf-8" /> < title >纯CSS实现表头固定 </ title > < style type = "text/css" > #scrollTable { width:701px; border: 1px solid #EB8;/*table没有外围的border,只有内部的td或th有border*/ background: #FF8C00; } #scrollTable table { border-collapse:collapse; /*统一设置两个table为细线表格*/ } /*表头 div的第一个子元素**/ #scrollTable table.thead{ width:100%; } /*表头*/ #scrollTable table.thead th{ border: 1px solid #EB8; border-right:#C96; color:#fff; background: #FF8C00;/*亮桔黄色*/ } /*能带滚动条的表身*/ /*div的第二个子元素*/ #scrollTable div{ width:100%; height:200px; overflow:auto;/*必需*/ scrollbar-face-color:#EB8;/*那三个小矩形的背景色*/ scrollbar-base-color:#ece9d8;/*那三个小矩形的前景色*/ scrollbar-arrow-color:#FF8C00;/*上下按钮里三角箭头的颜色*/ scrollbar-track-color:#ece9d8;/*滚动条的那个活动块所在的矩形的背景色*/ scrollbar-highlight-color:#800040;/*那三个小矩形左上padding的颜色*/ scrollbar-shadow-color:#800040;/*那三个小矩形右下padding的颜色*/ scrollbar-3dlight-color: #EB8;/*那三个小矩形左上border的颜色*/ scrollbar-darkshadow-Color:#EB8;/*那三个小矩形右下border的颜色*/ } /*能带滚动条的表身的正体*/ #scrollTable table.tbody{ width:100%; border: 1px solid #C96; border-right:#B74; color:#666666; background: #ECE9D8; } /*能带滚动条的表身的格子*/ #scrollTable table.tbody td{ border:1px solid #C96; } </ style > </ head > < body > < div id = "scrollTable" > < table class = "thead" > < col width = "170px" ></ col > < col width = "170px" ></ col > < col width = "170px" ></ col >< col ></ col > < tbody > < tr > < th >名称</ th > < th >语法</ th > < th >说明</ th > < th >例子</ th > </ tr > </ tbody > </ table > < div > < table class = "tbody" > < col width = "170px" ></ col > < col width = "170px" ></ col > < col width = "170px" ></ col >< col ></ col > < tbody > < tr > < td >Simple attribute Selector</ td > < td >[attr] </ td > < td >选择具有此属性的元素</ td > < td >blockquote[title] { < br />color: red }</ td > </ tr > < tr > < td >attribute Value Selector</ td > < td >[attr="value"] </ td > < td >选出属性值精确等于给出值的元素</ td > < td >h2[align="left"] { < br />cursor: hand } </ td > </ tr > < tr > < td >"Begins-with" attribute Value Selector</ td > < td >[attr^="value"] </ td > < td >选出属性值以给出值开头的元素</ td > < td >h2[align^="right"] { < br />cursor: hand } </ td > </ tr > < tr > < td >"Ends-with" attribute Value Selector</ td > < td >[attr$="value"] </ td > < td >选出属性值以给出值结尾的元素</ td > < td >div[class$="vml"]{< br />cursor: hand} </ td > </ tr > < tr > < td >Substring-match attribute Value Selector</ td > < td >[attr*="value"] </ td > < td >选出属性值包含给出值的元素</ td > < td >div[class*="grid"]{< br /> float:left} </ td > </ tr > < tr > < td >One-Of-Many Attribute Value Selector</ td > < td >[attr~="value"] </ td > < td >原元素的属性值为多个单词,给出值为其中一个。</ td > < td >li[class~="last"]{< br /> padding-left:2em} </ td > </ tr > < tr > < td >Hyphen Attribute Value Selector</ td > < td >[attr|="value"] </ td > < td >原元素的属性值等于给出值,或者以给出值加“-”开头</ td > < td >span[lang|="en"]{ < br />color:green}</ td > </ tr > < tr > < td >反选属性值选择器</ td > < td >[attr!="value"] </ td > < td >非标准,jQuery中出现的</ td > < td >span[class!="red"]{< br />color:green}</ td > </ tr > </ tbody > </ table > </ div > </ div > </ body > </ html > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
如何使用CSS的object-position实现图片在img标签中的定位
该文章介绍了CSS中的object-position属性,用于精确控制替换元素在容器内的位置,通过指定水平和垂直方向的偏移量,可以实现精准定位2024-11-08- 文章主要探讨了CSS Grid布局在Internet Explorer(IE)中的不兼容问题,并提供了具体的解决方案和最佳实践,文章首先介绍了CSS Grid布局的基本概念和与传统布局方法的区别,然2024-11-08
- 本文介绍了CSS实现圆角渐变边框的方法,首先设置元素边框为1像素宽度,样式为实线,颜色为透明,然后设置元素边框圆角为10像素,再设置背景剪裁区域和背景绘制区域为内边距和边2024-10-29
- 在CSS布局中,实现元素左右排列有多种方式,Flex布局通过设置margin-left:auto或margin-right:auto实现元素靠右或靠左排列,Grid布局利用grid-template-columns和justify-self2024-10-29
- 在CSS中,隐藏滚动条同时保留滚动功能可以通过设置overflow属性和使用特定的CSS伪元素实现,例如,使用::-webkit-scrollbar针对WebKit浏览器,-ms-overflow-style适用于IE和Edg2024-10-29
- 本文详细介绍了CSS中的border属性及其相关特性,包括border-width(宽度)、border-style(样式)和border-color(颜色)等,此外,还讲述了如何独立控制元素的四个边的边框,2024-10-28
- 本文主要介绍了在网页开发中如何实现“回到顶部”的功能,通过HTML和CSS的编写,可以实现一个浮动在页面右下角的小图标,点击后即可回到页面顶部,这种设计可以提高网站的可用2024-10-28
- 盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
- 盒子模型是网页布局的基础,包括边框、外边距、内边距和实际内容,通过CSS可以控制盒子之间的距离及其外观,如边框样式、边框颜色等,重要属性包括padding和margin,分别控制内2024-10-18
CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)
本文详细介绍了CSS3中的两个实现高斯模糊效果的API:filter和backdrop-filter,filter可以直接在图像或背景图上添加多种效果,而backdrop-filter则用于在元素后的区域添加效2024-09-26
最新评论