htmlcss将表头固定的方法
本篇内容主要讲解“html css将表头固定的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html css将表头固定的方法”吧!
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的连平网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
position属性取值为fixed时,则元素的位置将不受滚动条的影响,而是直接依据窗口定位,这就是将表头固定的最直接方法,网上其他途径感觉都是在走弯路。但是与此同时必须解决两个问题。第一:表体将随之不依据表头定位,而是依据body元素定位,因此表体将上移,导致表体靠上部分被表头遮挡,而且有重影。第二:表体的宽高和表头的宽高也将互相独立不再受文档流的约束,这导致单元格对不齐。
解决办法示例如下。其中,单元格上下对齐的问题可以通过设置padding margin 百分比width来解决,表头和表体也可以放在各自的div里。
样式单
代码如下:
js脚本
代码如下:
$(function(){
$("#spacetr").css("height",$("#thead").css("height"));
//将空白行的高度设置为和表头等高,使被遮挡的数据刚好下移表头高度的距离
});
jsp代码:
代码如下:
<%-- --%>
招聘学科 | ${postname} |
${schoolPostnumbers.key} | ${postnumber} |
到此,相信大家对“html css将表头固定的方法”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
文章名称:htmlcss将表头固定的方法
转载来源:http://pwwzsj.com/article/ghhepg.html