纯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。
<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以提高表格的渲染效率。
<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>
表现层部分:
#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; }
运行代码:
<!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下可以设置滚动条的样式,我们也把玩一翻吧。
<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>
表现层部分:
#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; }
运行代码:
<!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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]