分享更有价值
被信任是一种快乐

怎么用纯CSS实现表头固定

文章页正文上

这篇文章主要介绍怎么用纯CSS实现表头固定,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
  我们知道,CSS是负责表现,HTML是负责结构,同样的结构,换个样式,给人的感觉完全不同,这也说明人的眼睛是很容易受骗。因此前些狂热鼓吹p+CSS的日子里,人们总是想在页面去掉table,用p+span弄出了一个个“table”来。虽然这种事是不可取,但也告诉我们,table做得的事,通过一些组合我们也能做出来。换个思路来说,既然一个table做不了,就两个吧。上面的table模拟表头,下面的table模拟带滚动条的部分。在我们继续讲下去之前,我们先明确一下我们的需求吧,要不太抽象了。首先是表格为4*9,每列宽170px,总为680px,滚动条在各浏览器默认为16px,别忘了,width是不包含border在内,四列就有5个纵向的border,宽总长为701px。
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  然后我们把这个table一分为二,第一个table为表头,第二个table要带滚动条,说明要在其父元素上应用overflow样式,因此它要外套一个p。这个p与第一个table应该是等长的。不过不用花心思了,我们在它们的外面最套一个p,设置其width为701px,然后把这两个子元素的宽都设为100%就行了。注意,我们在table中显式添加tbody以提高表格的渲染效率。
        
  
  
  
  
  
  
  
  
  
     
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  表现层部分:
  #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;
  }
  运行代码:
  

  
  
  
  
     #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;
  }
  
  
  
        
  
  
  
  
  
  
  
  
  
     
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

相关推荐: css中如何实现文字的垂直水平居中

这篇文章主要为大家展示了“css中如何实现文字的垂直水平居中”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中如何实现文字的垂直水平居中”这篇文章吧。  ps:以上方法仅针对文字的水平居中css的全称是Casc…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册