html css将表头固定不动的最立即的方式

日期:2021-03-08 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

position特性赋值为fixed时,则元素的部位将不会受到翻转条的危害,而是立即根据对话框精准定位,这便是将表头固定不动的最立即方式,在网上别的方式觉得全是在走弯路。可是与此另外务必处理两个难题。第1:表体将随之不根据表头精准定位,而是根据body元素精准定位,因而表体将上移,致使表体靠上一部分被表头遮挡,并且有重影。第2:表体的宽高和表头的宽高也将相互之间单独已不受文本文档流的管束,这致使模块格对不齐。
处理方法示比如下。在其中,模块格左右对齐的难题能够根据设定padding margin 百分比width来处理,表头和表体还可以放在各有的div里。
款式单

拷贝编码
编码以下:

<style type="text/css">
*{
padding:0px;
margin: 0px;
}
#thead {
/*固定不动表头*/
position:fixed;
/* 表头显示信息层级高于表体,避免空白行和表头重叠时出現重影*/
z-index:2;
background:#ECECFF;
}
#spacetr{ /* 空白的tr 用来弥补表头遮住的数据信息*/
position:relative;
z-index:1;
}
.tdata { /* 显示信息报表数据信息的tr */
position:relative;
z-index:1;
}
</style>

js脚本制作

拷贝编码
编码以下:

$(function(){
$("#spacetr").css("height",$("#thead").css("height"));
//将空白行的高宽比设定为和表头等高,使被遮挡的数据信息恰好下移表头高宽比的间距
});

jsp编码:

拷贝编码
编码以下:

<div style="width:100%">
<%--<img src="${pageContext.request.contextPath}/images/post_head.jpg"/> --%>
<table id="table" border="1px gray solid " cellspacing="0" cellpadding="0" width="100%;" >
<tr id="thead">
<td width="9%" align="center">招骋学科</td>
<c:forEach items="${postnames}" var="postname">
<td valign="bottom" align="center">
${postname}
</td>
</c:forEach>
</tr>
<tr id="spacetr">
<td width="9%"></td>
<c:forEach items="${postnames}" var="postname">
<td>
</td>
</c:forEach>
</tr>
<c:forEach items="${shcoolsPostnumbers}" var="schoolPostnumbers">
<tr class="tdata">
<td width="9%" >${schoolPostnumbers.key}</td>
<c:forEach items="${schoolPostnumbers.value}" var="postnumber">
<td align="center"> ${postnumber} </td>
</c:forEach>
</tr>
</c:forEach>
</table>
</div>