温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用纯CSS实现表头固定

发布时间:2022-02-28 15:30:29 来源:亿速云 阅读:266 作者:小新 栏目:web开发

这篇文章主要介绍怎么用纯CSS实现表头固定,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

  我们知道,CSS是负责表现,HTML是负责结构,同样的结构,换个样式,给人的感觉完全不同,这也说明人的眼睛是很容易受骗。因此前些狂热鼓吹p+CSS的日子里,人们总是想在页面去掉table,用p+span弄出了一个个“table”来。虽然这种事是不可取,但也告诉我们,table做得的事,通过一些组合我们也能做出来。换个思路来说,既然一个table做不了,就两个吧。上面的table模拟表头,下面的table模拟带滚动条的部分。在我们继续讲下去之前,我们先明确一下我们的需求吧,要不太抽象了。首先是表格为4*9,每列宽170px,总为680px,滚动条在各浏览器默认为16px,别忘了,width是不包含border在内,四列就有5个纵向的border,宽总长为701px。

  <table>

  <tr>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  </tr>

  <tr>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  </tr>

  <tr>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  </tr>

  <tr>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  </tr>

  <tr>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  </tr>

  <tr>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  </tr>

  <tr>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  </tr>

  <tr>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  </tr>

  <tr>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  <td>&nbsp;</td>

  </tr>

  </table>

  然后我们把这个table一分为二,第一个table为表头,第二个table要带滚动条,说明要在其父元素上应用overflow样式,因此它要外套一个p。这个p与第一个table应该是等长的。不过不用花心思了,我们在它们的外面最套一个p,设置其width为701px,然后把这两个子元素的宽都设为100%就行了。注意,我们在table中显式添加tbody以提高表格的渲染效率。

  <pid="scrollTable">

  <tableclass="thead">

  <tbody>

  <tr>

  <th>名称</th>

  <th>语法</th>

  <th>说明</th>

  <th>例子</th>

  </tr>

  </tbody>

  </table>

  <p>

  <tableclass="tbody">

  <tbody>

  <tr>

  <td>SimpleattributeSelector</td>

  <td>[attr]</td>

  <td>选择具有此属性的元素</td>

  <td>blockquote[title]{<br/>color:red}</td>

  </tr>

  <tr>

  <td>attributeValueSelector</td>

  <td>[attr="value"]</td>

  <td>选出属性值精确等于给出值的元素</td>

  <td>h3[align="left"]{<br/>cursor:hand}</td>

  </tr>

  <tr>

  <td>"Begins-with"attributeValueSelector</td>

  <td>[attr^="value"]</td>

  <td>选出属性值以给出值开头的元素</td>

  <td>h3[align^="right"]{<br/>cursor:hand}</td>

  </tr>

  <tr>

  <td>"Ends-with"attributeValueSelector</td>

  <td>[attr$="value"]</td>

  <td>选出属性值以给出值结尾的元素</td>

  <td>p[class$="vml"]{<br/>cursor:hand}</td>

  </tr>

  <tr>

  <td>Substring-matchattributeValueSelector</td>

  <td>[attr*="value"]</td>

  <td>选出属性值包含给出值的元素</td>

  <td>p[class*="grid"]{<br/>float:left}</td>

  </tr>

  <tr>

  <td>One-Of-ManyAttributeValueSelector</td>

  <td>[attr~="value"]</td>

  <td>原元素的属性值为多个单词,给出值为其中一个。</td>

  <td>li[class~="last"]{<br/>padding-left:2em}</td>

  </tr>

  <tr>

  <td>HyphenAttributeValueSelector</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>

  </p>

  </p>

  表现层部分:

  #scrollTable{

  width:701px;

  border:1pxsolid#EB8;/*table没有外围的border,只有内部的td或th有border*/

  background:#FF8C00;

  }

  #scrollTabletable{

  border-collapse:collapse;/*统一设置两个table为细线表格*/

  }

  #scrollTabletable.thead{/*表头*/

  /*p的第一个子元素*/

  width:100%;

  }

  #scrollTabletable.theadth{/*表头*/

  border:1pxsolid#EB8;

  border-right:#C96;

  color:#fff;

  background:#FF8C00;/*亮桔黄色*/

  }

  #scrollTablep{/*能带滚动条的表身*/

  /*p的第二个子元素*/

  width:100%;

  height:200px;

  overflow:auto;/*必需*/

  }

  #scrollTabletable.tbody{/*能带滚动条的表身的正体*/

  width:100%;

  border:1pxsolid#C96;

  border-right:#B74;

  color:#666666;

  background:#ECE9D8;

  }

  #scrollTabletable.tbodytd{/*能带滚动条的表身的格子*/

  border:1pxsolid#C96;

  }

  运行代码:

  <!doctypehtml>

  <htmldir="ltr"lang="zh-CN">

  <head>

  <metacharset="utf-8"/>

  <title>纯CSS实现表头固定</title>

  <styletype="text/css">

  #scrollTable{

  width:701px;

  border:1pxsolid#EB8;/*table没有外围的border,只有内部的td或th有border*/

  background:#FF8C00;

  }

  #scrollTabletable{

  border-collapse:collapse;/*统一设置两个table为细线表格*/

  }

  #scrollTabletable.thead{/*表头*/

  /*p的第一个子元素*/

  width:100%;

  }

  #scrollTabletable.theadth{/*表头*/

  border:1pxsolid#EB8;

  border-right:#C96;

  color:#fff;

  background:#FF8C00;/*亮桔黄色*/

  }

  #scrollTablep{/*能带滚动条的表身*/

  /*p的第二个子元素*/

  width:100%;

  height:200px;

  overflow:auto;/*必需*/

  }

  #scrollTabletable.tbody{/*能带滚动条的表身的正体*/

  width:100%;

  border:1pxsolid#C96;

  border-right:#B74;

  color:#666666;

  background:#ECE9D8;

  }

  #scrollTabletable.tbodytd{/*能带滚动条的表身的格子*/

  border:1pxsolid#C96;

  }

  </style>

  </head>

  <body>

  <pid="scrollTable">

  <tableclass="thead">

  <tbody>

  <tr>

  <th>名称</th>

  <th>语法</th>

  <th>说明</th>

  <th>例子</th>

  </tr>

  </tbody>

  </table>

  <p>

  <tableclass="tbody">

  <tbody>

  <tr>

  <td>SimpleattributeSelector</td>

  <td>[attr]</td>

  <td>选择具有此属性的元素</td>

  <td>blockquote[title]{<br/>color:red}</td>

  </tr>

  <tr>

  <td>attributeValueSelector</td>

  <td>[attr="value"]</td>

  <td>选出属性值精确等于给出值的元素</td>

  <td>h3[align="left"]{<br/>cursor:hand}</td>

  </tr>

  <tr>

  <td>"Begins-with"attributeValueSelector</td>

  <td>[attr^="value"]</td>

  <td>选出属性值以给出值开头的元素</td>

  <td>h3[align^="right"]{<br/>cursor:hand}</td>

  </tr>

  <tr>

  <td>"Ends-with"attributeValueSelector</td>

  <td>[attr$="value"]</td>

  <td>选出属性值以给出值结尾的元素</td>

  <td>p[class$="vml"]{<br/>cursor:hand}</td>

  </tr>

  <tr>

  <td>Substring-matchattributeValueSelector</td>

  <td>[attr*="value"]</td>

  <td>选出属性值包含给出值的元素</td>

  <td>p[class*="grid"]{<br/>float:left}</td>

  </tr>

  <tr>

  <td>One-Of-ManyAttributeValueSelector</td>

  <td>[attr~="value"]</td>

  <td>原元素的属性值为多个单词,给出值为其中一个。</td>

  <td>li[class~="last"]{<br/>padding-left:2em}</td>

  </tr>

  <tr>

  <td>HyphenAttributeValueSelector</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>

  </p>

  </p>

  </body>

  </html>

怎么用纯CSS实现表头固定

以上是“怎么用纯CSS实现表头固定”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI