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" //在这里设置高度
}
在开发的时候，我们有时候会有这样的需求：由于表格的内容比较多，如果横竖都出现滚动条就看不到表头了，这就要求表格的表头和第一列固定，并且出现双向滚动条。本文就就给大家介绍一种通过css和两行js简单实现。
如下图，将整个表格分为四个区域：1、左上区域需要单独出来，因为此区域不参与滚动；2、上部表头，需要固定在顶部并且参与横向滚动；3、左边表头，需要滚动并且参与竖向滚动；4、表格主区域，会有横竖向的滚动，控制顶部和左边的表头。
table的th或者td里面套一个div并设置宽度，目的是为了撑开table的表格，因为单独给th或者td是不起作用的。
技术博客
CSDN： http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式
