1、css写法如下:
<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>
2、js写法如下:
$(function(){
$("#spacetr").css("height",$("#thead").css("height"))
//将空白行的高度设置为和表头等高,使被遮挡的数据刚好下移表头高度的距离
})
3、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>
方法<html><head>
<meta http-equiv="content-type" content="text/htmlcharset=utf-8">
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<script language=javascript>
var t, n, c
window.onload=function(){
t = document.getElementById("tb")
t.rows[0].style.height="50px" //在这里设置高度
}